/* Yuppop UI v1.0.0. Scoped tokens: import on a .yp-ui root, never override legacy :root. */
.yp-ui {
  --yp-bg: #faf9f6;
  --yp-surface: #ffffff;
  --yp-subtle: #f1f0eb;
  --yp-ink: #171717;
  --yp-ink-hover: #343430;
  --yp-muted: #62625c;
  --yp-border: #deddd6;
  --yp-control-border: #83837a;
  --yp-accent: #ffe05d;
  --yp-accent-soft: #fff8d6;
  --yp-focus: #765a00;
  --yp-success: #236345;
  --yp-success-bg: #eaf5ee;
  --yp-warning: #765300;
  --yp-warning-bg: #fff4d5;
  --yp-danger: #ad302b;
  --yp-danger-hover: #8d231f;
  --yp-danger-bg: #fff0ed;
  --yp-info: #275b91;
  --yp-info-bg: #edf4fc;
  --yp-inverse: #ffffff;
  --yp-inverse-muted: #c6c5bc;
  --yp-brand-mark: #a17a00;
  --yp-switch-off: #dad9d2;
  --yp-backdrop: #17171770;
  --yp-preview-green: linear-gradient(165deg,#858f7c 0%,#333c34 45%,#151d18 100%);
  --yp-preview-violet: linear-gradient(150deg,#9a8eab,#514456 48%,#241a2a);
  --yp-preview-cover: linear-gradient(135deg,#e9dfc8,#c4d0c0);
  --yp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --yp-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --yp-space-1: 4px;
  --yp-space-2: 8px;
  --yp-space-3: 12px;
  --yp-space-4: 16px;
  --yp-space-5: 20px;
  --yp-space-6: 24px;
  --yp-space-8: 32px;
  --yp-space-10: 40px;
  --yp-space-12: 48px;
  --yp-space-16: 64px;
  --yp-radius-sm: 8px;
  --yp-radius-md: 12px;
  --yp-radius-lg: 20px;
  --yp-radius-xl: 28px;
  --yp-radius-pill: 999px;
  --yp-control-sm: 40px;
  --yp-control-md: 48px;
  --yp-control-lg: 56px;
  --yp-shadow-popover: 0 8px 32px #1717171a;
  --yp-shadow-dialog: 0 24px 80px #1717172b;
  --yp-duration-fast: 120ms;
  --yp-duration-normal: 180ms;
  --yp-ease: cubic-bezier(.2, .8, .2, 1);
  --yp-layer-sticky: 20;
  --yp-layer-popover: 40;
  --yp-layer-toast: 60;
  color: var(--yp-ink);
  font: 400 16px/1.6 var(--yp-font);
  -webkit-font-smoothing: antialiased;
}

/* Theme is scoped to the shared component root; the default remains light. */
.yp-ui {
  color-scheme: light;
  --yp-on-accent: #171717;
  --yp-media-ink: #ffffff;
  --yp-media-bg: #171717;
  --yp-footer-bg: #171717;
  --yp-footer-ink: #ffffff;
  --yp-code-bg: #20211e;
  --yp-code-ink: #eaeae2;
  --yp-code-muted: #c4c5b9;
}
.yp-ui[data-theme="dark"] {
  color-scheme: dark;
  --yp-bg: #151614;
  --yp-surface: #1e201c;
  --yp-subtle: #292c26;
  --yp-ink: #f3f2eb;
  --yp-ink-hover: #d9dacd;
  --yp-muted: #b4b8a9;
  --yp-border: #3b4035;
  --yp-control-border: #7d8673;
  --yp-accent-soft: #38321a;
  --yp-focus: #ffe05d;
  --yp-success: #a4dfb5;
  --yp-success-bg: #1d3526;
  --yp-warning: #f3d57a;
  --yp-warning-bg: #39301a;
  --yp-danger: #ffb4a9;
  --yp-danger-hover: #ffc7bf;
  --yp-danger-bg: #3c2320;
  --yp-info: #a8cfff;
  --yp-info-bg: #1e3044;
  --yp-inverse: #151614;
  --yp-brand-mark: #ffe05d;
  --yp-switch-off: #69715f;
  --yp-backdrop: #000000aa;
  --yp-shadow-popover: 0 8px 32px #00000066;
  --yp-shadow-dialog: 0 24px 80px #00000088;
}

.yp-ui *, .yp-ui *::before, .yp-ui *::after { box-sizing: border-box; }
.yp-ui [hidden] { display: none !important; }
.yp-ui :where(button, input, select, textarea) { font: inherit; }
.yp-ui :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--yp-focus); outline-offset: 3px; }
.yp-ui :where(h1,h2,h3,h4,p) { margin: 0; }
/* Keep headings on their component's surface color, including media and accent surfaces.
   This scoped rule also shields them from legacy global h1 color declarations. */
.yp-ui :where(h1,h2,h3,h4,h5,h6) { color: inherit; }
.yp-ui button { cursor: pointer; }
.yp-ui :disabled { cursor: not-allowed; }
.yp-ui a { color: inherit; }
.yp-ui .yp-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--yp-space-3); }
.yp-ui .yp-stack { display: grid; gap: var(--yp-space-4); }
.yp-ui fieldset.yp-stack { min-width: 0; margin: 0; padding: 0; border: 0; }
.yp-ui .yp-muted { color: var(--yp-muted); }
.yp-ui .yp-small { font-size: 14px; line-height: 1.5; }
.yp-ui .yp-mono { font-family: var(--yp-mono); font-size: 12px; }
.yp-ui .yp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.yp-ui .yp-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; min-height: var(--yp-control-md); padding: 10px 22px; border: 1px solid transparent; border-radius: var(--yp-radius-pill); background: var(--yp-ink); color: var(--yp-inverse); font-size: 14px; line-height: 1.4; font-weight: 650; text-decoration: none; transition: background var(--yp-duration-fast), box-shadow var(--yp-duration-fast); }
.yp-ui .yp-button:hover:not(:disabled) { background: var(--yp-ink-hover); }
.yp-ui .yp-button[data-variant=secondary] { border-color: var(--yp-control-border); background: var(--yp-surface); color: var(--yp-ink); }
.yp-ui .yp-button[data-variant=secondary]:hover:not(:disabled), .yp-ui .yp-button[data-variant=ghost]:hover:not(:disabled) { background: var(--yp-subtle); }
.yp-ui .yp-button[data-variant=ghost] { background: transparent; color: var(--yp-ink); }
.yp-ui .yp-button[data-variant=danger] { background: var(--yp-danger); color: var(--yp-inverse); }
.yp-ui .yp-button[data-variant=danger]:hover:not(:disabled) { background: var(--yp-danger-hover); }
.yp-ui .yp-button[data-size=sm] { min-height: var(--yp-control-sm); padding: 8px 16px; font-size: 13px; }
.yp-ui .yp-button[data-size=lg] { min-height: var(--yp-control-lg); padding-inline: 28px; font-size: 16px; }
.yp-ui .yp-button:disabled { opacity: .45; }
.yp-ui .yp-button[aria-busy=true] { opacity: .75; }
.yp-ui .yp-button[data-icon=true] { width: 48px; padding: 0; border-radius: var(--yp-radius-md); }
.yp-ui .yp-button svg, .yp-ui .yp-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.yp-ui .yp-link { display: inline-flex; align-items: center; gap: 6px; text-underline-offset: 5px; text-decoration: underline; font-weight: 600; }
.yp-ui .yp-link:hover { color: var(--yp-muted); }
.yp-ui .yp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--yp-radius-pill); background: var(--yp-subtle); font-size: 12px; line-height: 1.5; font-weight: 650; }
.yp-ui [data-tone=success] { --yp-tone: var(--yp-success); --yp-tone-bg: var(--yp-success-bg); }
.yp-ui [data-tone=warning] { --yp-tone: var(--yp-warning); --yp-tone-bg: var(--yp-warning-bg); }
.yp-ui [data-tone=danger] { --yp-tone: var(--yp-danger); --yp-tone-bg: var(--yp-danger-bg); }
.yp-ui [data-tone=info] { --yp-tone: var(--yp-info); --yp-tone-bg: var(--yp-info-bg); }
.yp-ui .yp-badge[data-tone], .yp-ui .yp-alert[data-tone] { color: var(--yp-tone); background: var(--yp-tone-bg); }
.yp-ui .yp-avatar { color: var(--yp-on-accent); width: 44px; height: 44px; display: inline-grid; flex-shrink: 0; place-items: center; overflow: hidden; background: var(--yp-accent); border-radius: 50%; font-weight: 700; }
.yp-ui .yp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.yp-ui .yp-field { display: grid; gap: 8px; min-width: 0; }
.yp-ui .yp-label { font-size: 14px; font-weight: 650; }
.yp-ui .yp-field input:not([type=checkbox]):not([type=radio]), .yp-ui .yp-field select, .yp-ui .yp-field textarea, .yp-ui .yp-input { width: 100%; min-width: 0; height: auto; min-height: 48px; border: 1px solid var(--yp-control-border); border-radius: var(--yp-radius-md); background: var(--yp-surface); color: var(--yp-ink); padding: 12px 14px; font-size: 16px; line-height: 1.45; }
.yp-ui .yp-field textarea { min-height: 120px; resize: vertical; }
.yp-ui .yp-field :is(input,select,textarea):disabled { background: var(--yp-subtle); color: var(--yp-muted); }
.yp-ui .yp-field [aria-invalid=true] { border-color: var(--yp-danger) !important; }
.yp-ui .yp-field input::placeholder, .yp-ui .yp-field textarea::placeholder { color: var(--yp-muted); opacity: 1; }
.yp-ui .yp-help { font-size: 13px; line-height: 1.5; color: var(--yp-muted); }
.yp-ui .yp-error { font-size: 13px; line-height: 1.5; color: var(--yp-danger); }
.yp-ui .yp-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.yp-ui .yp-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--yp-ink); }
.yp-ui .yp-check input[role=switch] { appearance: none; position: relative; width: 42px; height: 26px; border: 1px solid var(--yp-control-border); border-radius: 999px; background: var(--yp-switch-off); }
.yp-ui .yp-check input[role=switch]::before { content: ''; display: block; width: 18px; height: 18px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: var(--yp-surface); transition: transform 120ms; }
.yp-ui .yp-check input[role=switch]:checked { background: var(--yp-ink); }
.yp-ui .yp-check input[role=switch]:checked::before { transform: translateX(16px); }
.yp-ui .yp-search { display: flex; gap: 8px; align-items: center; }
.yp-ui .yp-search .yp-field { flex: 1; }
.yp-ui .yp-segments { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--yp-subtle); border-radius: var(--yp-radius-pill); }
.yp-ui .yp-segments button { min-height: 44px; border: 0; background: transparent; border-radius: var(--yp-radius-pill); padding: 10px 20px; color: var(--yp-muted); font-size: 14px; }
.yp-ui .yp-segments button[aria-pressed=true] { background: var(--yp-ink); color: var(--yp-inverse); }
.yp-ui .yp-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--yp-border); overflow-x: auto; }
.yp-ui .yp-tabs button { min-height: 48px; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--yp-muted); padding: 12px 2px; font-size: 14px; }
.yp-ui .yp-tabs button[aria-selected=true] { color: var(--yp-ink); border-bottom-color: var(--yp-ink); font-weight: 650; }
.yp-ui .yp-tabpanel { padding-block: 20px; }
.yp-ui .yp-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 13px; }
.yp-ui .yp-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.yp-ui .yp-breadcrumb li+li::before { content: '/'; color: var(--yp-muted); }
.yp-ui .yp-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.yp-ui .yp-pagination { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yp-ui .yp-pagination a { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid var(--yp-border); border-radius: 12px; text-decoration: none; }
.yp-ui .yp-pagination a[aria-current=page] { background: var(--yp-ink); color: var(--yp-inverse); }
.yp-ui .yp-brand { font-size: 28px; font-weight: 850; letter-spacing: -1.5px; white-space: nowrap; }
.yp-ui .yp-brand span { color: var(--yp-brand-mark); font-size: 16px; margin-left: 2px; }
.yp-ui .yp-header { display: flex; gap: 24px; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--yp-border); background: var(--yp-bg); }
.yp-ui .yp-header nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.yp-ui .yp-header a { text-decoration: none; }
.yp-ui .yp-header>.yp-button { margin-left: auto; }
.yp-ui .yp-mobile-nav { display: none; margin-left: auto; }
.yp-ui .yp-mobile-nav>summary { min-height: 44px; padding: 8px; cursor: pointer; }
.yp-ui .yp-mobile-nav nav { display: grid; padding: 12px; }
.yp-ui .yp-footer { padding: 32px; background: var(--yp-footer-bg); color: var(--yp-footer-ink); border-radius: var(--yp-radius-lg); }
.yp-ui .yp-footer a { text-underline-offset: 4px; }
.yp-ui .yp-footer .yp-muted { color: var(--yp-inverse-muted); }
.yp-ui .yp-card { border: 1px solid var(--yp-border); border-radius: var(--yp-radius-lg); padding: 24px; background: var(--yp-surface); min-width: 0; }
.yp-ui .yp-card h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.5px; }
.yp-ui .yp-card p { font-size: 14px; }
.yp-ui .yp-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 16px; }
.yp-ui .yp-effect { display: flex; flex-direction: column; position: relative; isolation: isolate; min-height: 320px; padding: 20px; overflow: hidden; border-radius: var(--yp-radius-lg); color: var(--yp-media-ink); text-decoration: none; background: var(--yp-media-bg); }
.yp-ui .yp-effect:before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--yp-preview-green); }
.yp-ui .yp-effect .yp-badge { align-self: flex-start; background: var(--yp-surface); color: var(--yp-ink); }
.yp-ui .yp-effect h3 { font-size: 28px; line-height: 1.1; margin-top: auto; letter-spacing: -.6px; }
.yp-ui .yp-effect p { font-size: 13px; margin-top: 8px; color: var(--yp-media-ink); }
.yp-ui .yp-effect:hover { box-shadow: inset 0 0 0 3px var(--yp-accent); }
.yp-ui .yp-effect--violet:before { background: var(--yp-preview-violet); }
.yp-ui .yp-visual-placeholder { aspect-ratio: 16/9; display: grid; place-items: center; background: var(--yp-preview-cover); border-radius: 12px; color: var(--yp-on-accent); margin-bottom: 20px; font-size: 12px; letter-spacing: 2px; }
.yp-ui .yp-price { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.yp-ui .yp-price[data-featured=true] { border-color: var(--yp-ink); background: var(--yp-accent-soft); }
.yp-ui .yp-price strong { font-size: 44px; letter-spacing: -2px; line-height: 1.2; }
.yp-ui .yp-price ul { margin: 0; padding-left: 20px; font-size: 14px; }
.yp-ui .yp-price .yp-button { margin-top: auto; }
.yp-ui .yp-accordion details { border-bottom: 1px solid var(--yp-border); }
.yp-ui .yp-accordion summary { cursor: pointer; display: list-item; padding: 20px 4px; font-weight: 600; }
.yp-ui .yp-accordion details p { padding: 0 4px 20px; color: var(--yp-muted); font-size: 14px; }
.yp-ui .yp-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: 12px; font-size: 14px; }
.yp-ui .yp-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.yp-ui .yp-alert strong { display: block; font-weight: 650; }
.yp-ui .yp-toast { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--yp-ink); color: var(--yp-inverse); border-radius: 12px; box-shadow: var(--yp-shadow-popover); font-size: 14px; }
.yp-ui .yp-toast button { border: 0; background: transparent; color: inherit; width: 44px; height: 44px; display: grid; place-items: center; }
.yp-ui .yp-dialog { margin: auto; border: 1px solid var(--yp-border); border-radius: 24px; padding: 28px; background: var(--yp-surface); color: var(--yp-ink); width: min(480px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: var(--yp-shadow-dialog); }
.yp-ui .yp-dialog::backdrop { background: var(--yp-backdrop); }
.yp-ui .yp-dialog h2 { font-size: 26px; line-height: 1.2; }
.yp-ui .yp-dialog p { margin-top: 12px; }
.yp-ui .yp-dialog .yp-row { justify-content: flex-end; margin-top: 24px; }
.yp-ui .yp-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--yp-space-4); margin-bottom: var(--yp-space-5); }
.yp-ui .yp-dialog-heading h2 { overflow-wrap: anywhere; padding-top: var(--yp-space-2); }
.yp-ui .yp-dialog[data-wide=true] { width: min(1100px,calc(100vw - 32px)); padding: var(--yp-space-8); overflow: hidden; }
.yp-ui .yp-dialog-content { max-height: calc(100dvh - 200px); overflow: auto; padding: var(--yp-space-1); scrollbar-gutter: stable; }
.yp-ui .yp-generator { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--yp-space-8); }
.yp-ui .yp-generator > section { min-width: 0; align-content: start; }
.yp-ui .yp-generator h3 { font-size: 20px; line-height: 1.4; }
.yp-ui .yp-generator p { margin: 0; overflow-wrap: anywhere; }
.yp-ui .yp-generator ol { margin: 0; padding-inline-start: var(--yp-space-6); }
.yp-ui .yp-generator li + li { margin-top: var(--yp-space-3); }
.yp-ui .yp-generator .yp-upload { min-height: 150px; }
.yp-ui .yp-generator-placeholder { display: grid; place-content: center; justify-items: center; gap: var(--yp-space-5); min-height: 240px; padding: var(--yp-space-6); border-radius: var(--yp-radius-lg); background: var(--yp-subtle); text-align: center; }
.yp-ui .yp-generator-result { display: grid; gap: var(--yp-space-3); border-top: 1px solid var(--yp-border); padding-top: var(--yp-space-5); }
.yp-ui .yp-generator .yp-video[data-format=portrait] { aspect-ratio: 9/16; max-height: 440px; object-fit: contain; }
.yp-ui .yp-generator-page { max-width: 1100px; margin: auto; padding: var(--yp-space-8) var(--yp-space-4); }
.yp-ui .yp-template { display: grid; gap: var(--yp-space-8); min-width: 0; }
.yp-ui .yp-template-nav { position: sticky; top: var(--yp-template-sticky-offset, 0px); z-index: var(--yp-layer-sticky); border-radius: var(--yp-radius-md); padding: var(--yp-space-3); gap: var(--yp-space-4); }
.yp-ui .yp-template-brand { min-width: 0; max-width: 280px; font-size: 16px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.yp-ui .yp-template-nav .yp-link { min-height: 44px; align-items: center; }
.yp-ui .yp-template-nav .yp-link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.yp-ui .yp-template-mobile { display: none; margin-left: auto; }
.yp-ui .yp-template-mobile .yp-dropdown { position: absolute; right: 0; z-index: var(--yp-layer-popover); width: min(260px,calc(100vw - 64px)); min-width: 0; }
.yp-ui .yp-template-mobile .yp-dropdown nav { display: grid; gap: var(--yp-space-1); }
.yp-ui .yp-template-hero { padding-block: var(--yp-space-4); }
.yp-ui .yp-template-hero .yp-heading { font-size: clamp(28px,4vw,44px); line-height: 1.15; }
.yp-ui .yp-template-hero .yp-badge { justify-self: start; }
.yp-ui .yp-template-highlights { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--yp-space-3) var(--yp-space-8); padding-inline-start: var(--yp-space-5); margin: 0; }
.yp-ui .yp-template-section { border-top: 1px solid var(--yp-border); padding-top: var(--yp-space-8); }
.yp-ui .yp-template-section h2 { font-size: clamp(24px,3vw,32px); line-height: 1.25; overflow-wrap: anywhere; }
.yp-ui .yp-template [data-section] { scroll-margin-top: calc(110px + var(--yp-template-sticky-offset, 0px)); }
.yp-ui .yp-template [data-section]:focus { outline: 2px solid var(--yp-focus); outline-offset: 4px; }
.yp-ui .yp-template p { margin: 0; overflow-wrap: anywhere; }
.yp-ui .yp-template-specs { display: grid; margin: 0; gap: var(--yp-space-4); }
.yp-ui .yp-template-specs > div { display: grid; grid-template-columns: minmax(100px,1fr) minmax(0,3fr); gap: var(--yp-space-4); border-bottom: 1px solid var(--yp-border); padding-bottom: var(--yp-space-4); }
.yp-ui .yp-template-specs dt { font-weight: 650; }
.yp-ui .yp-template-specs dd { margin: 0; color: var(--yp-muted); }
.yp-ui .yp-template-article { padding-block: var(--yp-space-6); border-bottom: 1px solid var(--yp-border); }
.yp-ui .yp-template-footer { border-top: 1px solid var(--yp-border); padding-block: var(--yp-space-8); }
.yp-ui .yp-template-footer nav { display: flex; flex-wrap: wrap; gap: var(--yp-space-4); }
@media(max-width:900px) {
  .yp-ui .yp-template-nav > .yp-template-desktop { display: none; }
  .yp-ui .yp-template-mobile { display: block; }
  .yp-ui .yp-template-nav > .yp-button { margin-left: 0; }
}
@media(max-width:767px) {
  .yp-ui .yp-dialog[data-wide=true] { padding: var(--yp-space-4); }
  .yp-ui .yp-generator { grid-template-columns: minmax(0,1fr); gap: var(--yp-space-6); }
  .yp-ui .yp-dialog-heading h2 { font-size: 22px; }
  .yp-ui .yp-generator .yp-segments { border-radius: var(--yp-radius-md); }
  .yp-ui .yp-template-nav { padding: var(--yp-space-2); gap: var(--yp-space-2); flex-wrap: wrap; }
  .yp-ui .yp-template-brand { flex: 1 1 100%; max-width: none; }
  .yp-ui .yp-template-mobile { margin-left: 0; }
  .yp-ui .yp-template-nav > .yp-button, .yp-ui .yp-template-nav > [role=status] { margin-left: auto; }
  .yp-ui .yp-template-mobile .yp-dropdown { left: 0; right: auto; }
  .yp-ui .yp-template-highlights { grid-template-columns: minmax(0,1fr); }
  .yp-ui .yp-template-specs > div { grid-template-columns: minmax(0,1fr); gap: var(--yp-space-2); }
  .yp-ui .yp-template [data-section] { scroll-margin-top: calc(160px + var(--yp-template-sticky-offset, 0px)); }
}
.yp-ui .yp-disclosure { position: relative; display: inline-block; }
.yp-ui .yp-disclosure>summary { list-style: none; cursor: pointer; }
.yp-ui .yp-disclosure>summary::-webkit-details-marker { display: none; }
.yp-ui .yp-dropdown { display: grid; gap: 4px; margin-top: 8px; padding: 8px; min-width: 200px; background: var(--yp-surface); border: 1px solid var(--yp-border); border-radius: 12px; box-shadow: var(--yp-shadow-popover); }
.yp-ui .yp-dropdown a, .yp-ui .yp-dropdown button { display: block; padding: 12px; font-size: 14px; border: 0; border-radius: 8px; text-align: left; text-decoration: none; color: var(--yp-ink); background: transparent; }
.yp-ui .yp-dropdown a:hover, .yp-ui .yp-dropdown button:hover { background: var(--yp-subtle); }
.yp-ui .yp-tooltip-wrap { position: relative; display: inline-flex; }
.yp-ui .yp-tooltip { position: absolute; z-index: var(--yp-layer-popover); bottom: calc(100% + 8px); left: 0; width: max-content; max-width: min(240px,70vw); background: var(--yp-ink); color: var(--yp-inverse); border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 1.5; }
.yp-ui .yp-skeleton { border-radius: 8px; background: var(--yp-subtle); min-height: 16px; animation: yp-pulse 1.6s ease-in-out infinite; }
@keyframes yp-pulse { 50% { opacity: .45; } }
.yp-ui .yp-empty { padding: 32px 20px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.yp-ui .yp-empty>svg { width: 40px; height: 40px; color: var(--yp-muted); }
.yp-ui .yp-empty h3 { font-size: 22px; }
.yp-ui .yp-empty p { max-width: 380px; font-size: 14px; color: var(--yp-muted); }
.yp-ui .yp-progress { width: 100%; height: 8px; border: 0; appearance: none; accent-color: var(--yp-ink); overflow: hidden; border-radius: 999px; background: var(--yp-subtle); }
.yp-ui .yp-progress::-webkit-progress-bar { background: var(--yp-subtle); border-radius: 999px; }
.yp-ui .yp-progress::-webkit-progress-value { background: var(--yp-ink); border-radius: 999px; }
.yp-ui .yp-progress::-moz-progress-bar { background: var(--yp-ink); border-radius: 999px; }
.yp-ui .yp-upload { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; min-height: 200px; padding: 24px; border: 1px dashed var(--yp-control-border); border-radius: 20px; background: var(--yp-bg); cursor: pointer; }
.yp-ui .yp-upload:focus-within { outline: 3px solid var(--yp-focus); outline-offset: 3px; }
.yp-ui .yp-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.yp-ui .yp-upload svg { width: 28px; height: 28px; }
.yp-ui .yp-upload img { max-height: 160px; max-width: 100%; object-fit: contain; border-radius: 8px; }
.yp-ui .yp-video { color: var(--yp-media-ink); width: 100%; aspect-ratio: 16/9; border-radius: 20px; background: var(--yp-media-bg); display: block; }
.yp-ui .yp-table-wrap { overflow-x: auto; }
.yp-ui .yp-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.yp-ui .yp-table caption { text-align: left; margin-bottom: 16px; font-weight: 650; }
.yp-ui .yp-table th, .yp-ui .yp-table td { padding: 16px 12px; border-bottom: 1px solid var(--yp-border); white-space: nowrap; }
.yp-ui .yp-table th { color: var(--yp-muted); font-size: 12px; font-weight: 600; }
.yp-ui .yp-table .yp-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.yp-ui .yp-display { font-size: clamp(40px,5vw,72px); line-height: 1.06; font-weight: 780; letter-spacing: -.055em; }
.yp-ui .yp-heading { font-size: clamp(28px,3vw,40px); line-height: 1.15; font-weight: 750; letter-spacing: -.035em; }
.yp-ui .yp-title { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
.yp-ui .yp-eyebrow { font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yp-muted); }
.yp-ui .yp-container { width: min(1280px,calc(100% - 64px)); margin-inline: auto; }
.yp-ui .yp-hero { text-align: center; padding: 48px 20px; display: grid; justify-items: center; gap: 20px; }
.yp-ui .yp-hero>p { max-width: 560px; }
.yp-ui .yp-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 24px; }
.yp-ui .yp-credit { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yp-ui .yp-credit strong { font-size: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.yp-ui .yp-auth { max-width: 400px; margin-inline: auto; }
@media(max-width:767px) {
  .yp-ui .yp-container { width: calc(100% - 32px); }
  .yp-ui .yp-header { padding: 16px; gap: 12px; }
  .yp-ui .yp-header>nav { display: none; }
  .yp-ui .yp-mobile-nav { display: block; }
  .yp-ui .yp-header>.yp-button { margin-left: 0; padding-inline: 16px; }
  .yp-ui .yp-button[data-size=sm] { min-height: 44px; }
  .yp-ui .yp-card { padding: 20px; }
  .yp-ui .yp-row { gap: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .yp-ui *, .yp-ui *::before, .yp-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Compact media switches keep their intrinsic width inside flex/grid cards. */
.yp-ui .yp-segments.yp-segments--media { width: fit-content; max-width: calc(100% - var(--yp-space-6)); align-self: flex-start; justify-self: start; flex: none; margin: var(--yp-space-3); gap: var(--yp-space-1); padding: var(--yp-space-1); }
.yp-ui .yp-segments.yp-segments--media > button { flex: 0 1 auto; padding: var(--yp-space-2) var(--yp-space-4); white-space: normal; }
.yp-ui .yp-segments.yp-segments--media > button:disabled { opacity: .45; }

/* Shared static-interactive and SSR editorial compositions. No business data here.
   Legacy hook classes stay in HTML/JS; yp-t-* classes own layout only. */
.yp-template { margin: 0; background: var(--yp-bg); min-height: 100vh; }
.yp-template > main { max-width: 1450px; margin: auto; padding: var(--yp-space-12) var(--yp-space-6) var(--yp-space-16); }
.yp-template > .yp-header { position: sticky; top: 0; z-index: var(--yp-layer-sticky); background: var(--yp-bg); justify-content: space-between; padding: var(--yp-space-4) max(var(--yp-space-6), calc((100vw - 1402px)/2)); border-bottom: 1px solid var(--yp-border); }
.yp-template > .yp-footer { text-align: center; padding: var(--yp-space-8) var(--yp-space-6); }
.yp-template :where(h1,h2,h3) { line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.yp-template h1 { font-size: clamp(36px,4.5vw,60px); font-weight: 800; }
.yp-template h2 { font-size: clamp(26px,3vw,36px); }
.yp-template h3 { font-size: 20px; }
.yp-template em { font-style: normal; }
.yp-template :where(img,video) { max-width: 100%; height: auto; border-radius: var(--yp-radius-md); }
.yp-template :where(p,li) { overflow-wrap: anywhere; }
.yp-template :where(a) { text-underline-offset: 4px; }
.yp-template :where(section,[id]) { scroll-margin-top: 100px; }
.yp-template .yp-hidden, .yp-template .yp-t-screen:not(.on) { display: none; }
.yp-template .yp-t-screen.on { min-height: 65vh; }
.yp-template .yp-t-hero { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); column-gap: var(--yp-space-8); row-gap: var(--yp-space-4); align-items: stretch; }
.yp-template .yp-t-hero-left { display: contents; }
.yp-template .yp-t-hero h1 { grid-column: 1/-1; grid-row: 2; text-align: center; width: 100%; margin: var(--yp-space-2) 0 0; font-size: clamp(44px,4.7vw,72px); line-height: 1.12; font-weight: 900; }
.yp-template .yp-t-hero .lede { grid-column: 1/-1; grid-row: 3; text-align: center; max-width: 1160px; justify-self: center; font-size: clamp(18px,1.8vw,25px); font-weight: 700; line-height: 1.45; margin: 0 0 var(--yp-space-6); }
.yp-template .yp-t-hero .ref-disclaimer { grid-column: 1; grid-row: 5; margin: var(--yp-space-1) 0 0; }
.yp-template .yp-t-hero .answer-card { grid-column: 1/-1; grid-row: 6; margin-top: var(--yp-space-3); }
.yp-template .yp-t-hero .cast-panel { grid-column: 2; grid-row: 4; min-height: 562px; display: flex; flex-direction: column; padding: var(--yp-space-6); }
.yp-template .lede { font-size: 18px; color: var(--yp-muted); }
.yp-template .yp-t-reference-player { grid-column: 1; grid-row: 4; min-width: 0; width: 100%; height: 562px; min-height: 562px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--yp-border); border-radius: var(--yp-radius-lg); background: var(--yp-surface); }
.yp-template .yp-t-hero-video { display: block; width: 100%; height: 100%; min-height: 0; flex: 1; object-fit: contain; background: var(--yp-media-bg); border-radius: 0; }
.yp-template .yp-t-player-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--yp-space-2); padding: var(--yp-space-3); color: var(--yp-muted); font-size: 13px; }
.yp-template .yp-t-panel-head { display: flex; justify-content: space-between; gap: var(--yp-space-4); }
.yp-template .yp-t-panel-head h2 { font-size: 21px; margin-bottom: var(--yp-space-1); }
.yp-template .yp-t-panel-head p { color: var(--yp-muted); font-size: 12px; }
.yp-template .yp-t-picture-icon, .yp-template .yp-t-step-num { display: grid; place-items: center; min-width: 36px; height: 36px; background: var(--yp-accent); color: var(--yp-on-accent); border-radius: var(--yp-radius-md); }
.yp-template .yp-t-simple-upload { margin: var(--yp-space-3) 0 var(--yp-space-1); }
.yp-template .yp-t-option-card { margin: var(--yp-space-2) 0; padding: var(--yp-space-3); border: 1px solid var(--yp-border); border-radius: var(--yp-radius-md); }
.yp-template .yp-t-upload-step { display: flex; align-items: center; gap: var(--yp-space-3); margin-bottom: var(--yp-space-2); }
.yp-template .yp-upload { width: 100%; min-height: 128px; padding: var(--yp-space-3); gap: var(--yp-space-1); }
.yp-template .upload-guidance { font-size: 11px; margin-block: var(--yp-space-2); }
.yp-template .yp-upload .preview { max-height: 180px; }
.yp-template .yp-upload .icon svg { width: 36px; height: 36px; }
.yp-template .yp-upload .meta:empty { display: none; }
.yp-template .yp-t-option-card h3 { margin-bottom: var(--yp-space-2); font-size: 13px; }
.yp-template .yp-t-compact-checkout { display: grid; gap: var(--yp-space-3); margin-top: auto; padding-top: var(--yp-space-4); border-top: 1px solid var(--yp-border); }
.yp-template .yp-t-status { min-height: 1em; }
.yp-template .yp-t-section, .yp-template .yp-t-workflow-steps, .yp-template .yp-t-workflow-pricing, .yp-template .yp-t-meme-chat { margin-top: var(--yp-space-16); padding-top: var(--yp-space-10); border-top: 1px solid var(--yp-border); }
.yp-template .yp-t-workflow-heading { text-align: center; max-width: 800px; margin: 0 auto var(--yp-space-10); display: grid; gap: var(--yp-space-4); }
.yp-template .yp-t-workflow-heading h2 { font-size: clamp(35px,4.1vw,57px); line-height: 1.13; }
.yp-template .yp-t-workflow-step-grid { max-width: 1130px; margin: auto; }
.yp-template .yp-t-workflow-step { text-align: center; }
.yp-template .yp-t-workflow-plan-grid { max-width: 1040px; margin: auto; }
.yp-template .yp-t-section > h2, .yp-template .yp-t-meme-chat > h2 { margin-bottom: var(--yp-space-6); }
.yp-template .yp-t-cols2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--yp-space-5); }
.yp-template .yp-t-cols3, .yp-template .yp-t-workflow-step-grid, .yp-template .yp-t-workflow-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--yp-space-5); }
.yp-template .yp-t-align-center { align-items: center; }
.yp-template .yp-t-list { padding-left: var(--yp-space-5); line-height: 1.9; }
.yp-template .yp-t-illustration { margin: 0; display: flex; justify-content: center; }
.yp-template .yp-t-portrait { width: 46%; height: auto; }
.yp-template .yp-t-plan-price { font-size: 40px; font-weight: 750; letter-spacing: -.04em; }
.yp-template .yp-featured { background: var(--yp-accent-soft); }
.yp-template .yp-t-plan-features { padding-left: var(--yp-space-5); display: grid; gap: var(--yp-space-3); }
.yp-template .yp-t-workflow-disclosure { margin-top: var(--yp-space-6); color: var(--yp-muted); font-size: 14px; text-align: center; }
.yp-template .yp-t-meme-chat { max-width: 760px; margin-inline: auto; }
.yp-template .yp-t-chat-row { display: flex; align-items: flex-end; gap: var(--yp-space-3); margin: var(--yp-space-3) 0; }
.yp-template .yp-t-chat-row.me { justify-content: flex-end; }
.yp-template .yp-t-bubble { max-width: 78%; padding: var(--yp-space-3) var(--yp-space-4); border: 1px solid var(--yp-border); border-radius: var(--yp-radius-lg); background: var(--yp-surface); }
.yp-template .me .yp-t-bubble { background: var(--yp-accent-soft); }
.yp-template .yp-t-chat-pic { margin: 0; max-width: 240px; }
.yp-template .yp-t-chat-pic img { width: 100%; }
.yp-template .yp-t-chat-pic figcaption { color: var(--yp-muted); font-size: 13px; }
.yp-template .yp-t-chat-cta { margin-top: var(--yp-space-6); text-align: center; font-weight: 650; }
.yp-template .yp-t-section > .yp-section-head { flex-wrap: wrap; margin-bottom: var(--yp-space-6); }
.yp-template a.yp-card { text-decoration: none; }
.yp-template a.yp-card:hover { border-color: var(--yp-control-border); }
.yp-template .yp-t-card-title { font-size: 20px; }
.yp-template .yp-t-acct-wrap { position: relative; }
.yp-template .yp-t-acct-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; padding: var(--yp-space-2); border: 1px solid var(--yp-border); border-radius: var(--yp-radius-md); background: var(--yp-surface); box-shadow: var(--yp-shadow-popover); }
.yp-template .yp-t-acct-menu button { border: 0; background: transparent; color: var(--yp-ink); width: 100%; padding: var(--yp-space-3); }
.yp-template .yp-t-auth-shell { max-width: 460px; margin: auto; display: grid; gap: var(--yp-space-5); }
.yp-template .yp-t-auth-shell form { display: grid; gap: var(--yp-space-3); }
.yp-template .yp-t-auth-separator { color: var(--yp-muted); text-align: center; }
.yp-template .yp-t-auth-foot { font-size: 14px; }
.yp-template .yp-t-gallery { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: var(--yp-space-6); }
.yp-template .yp-t-tile-actions, .yp-template .yp-t-row { display: flex; gap: var(--yp-space-3); flex-wrap: wrap; }
.yp-template .yp-t-gen-history { margin-top: var(--yp-space-8); }
.yp-template .yp-t-gen-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--yp-space-3); padding-block: var(--yp-space-3); border-bottom: 1px solid var(--yp-border); }
.yp-template .yp-t-gen-state.succeeded { color: var(--yp-success); }
.yp-template .yp-t-gen-state.failed { color: var(--yp-danger); }
.yp-template .yp-t-gen-state.processing, .yp-template .yp-t-gen-state.submitting { color: var(--yp-warning); }
.yp-template .yp-t-empty { padding: var(--yp-space-8); border: 1px dashed var(--yp-border); border-radius: var(--yp-radius-lg); }
.yp-template .yp-t-dlg-title { font-size: 26px; font-weight: 700; }
.yp-template .yp-dialog > * + * { margin-top: var(--yp-space-5); }
.yp-template .yp-t-spin { width: 36px; height: 36px; border: 3px solid var(--yp-border); border-top-color: var(--yp-ink); border-radius: var(--yp-radius-pill); animation: yp-content-spin 1s linear infinite; }
@keyframes yp-content-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .yp-template .yp-t-spin { animation: none; } }
/* Shared segmented-control semantics for static documents and React previews. */
.yp-ui .yp-segments > [role=tab][aria-selected=true] { background: var(--yp-ink); color: var(--yp-inverse); }
/* Editorial source is opt-in; historical article styles do not apply. */
.yp-editorial { background: var(--yp-bg); max-width: 900px; margin: auto; padding: var(--yp-space-12) var(--yp-space-6) var(--yp-space-16); }
.yp-editorial :where(h1,h2,h3) { line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.yp-editorial h1 { font-size: clamp(32px,4.5vw,52px); margin-block: var(--yp-space-5) var(--yp-space-6); }
.yp-editorial h2 { font-size: 28px; margin-block: var(--yp-space-10) var(--yp-space-4); }
.yp-editorial h3 { font-size: 21px; margin-block: var(--yp-space-6) var(--yp-space-3); }
.yp-editorial :where(p,ul,ol,blockquote,figure,section) { margin-block: var(--yp-space-5); }
.yp-editorial :where(p,li) { overflow-wrap: anywhere; }
.yp-editorial a { text-underline-offset: 4px; }
.yp-editorial :where(.yp-e-eyebrow,.yp-e-post-date,.yp-e-post-meta,figcaption) { font-size: 14px; color: var(--yp-muted); }
.yp-editorial :where(img,video) { display: block; max-width: 100%; height: auto; border-radius: var(--yp-radius-lg); }
.yp-editorial figure { margin-inline: 0; }
.yp-editorial .yp-e-post-figure img { margin: auto; width: auto; height: auto; }
.yp-editorial .yp-e-post-list { display: grid; gap: var(--yp-space-5); }
.yp-editorial .yp-e-post-card { display: block; border: 1px solid var(--yp-border); border-radius: var(--yp-radius-lg); background: var(--yp-surface); padding: var(--yp-space-6); text-decoration: none; }
.yp-editorial .yp-e-post-card h2 { font-size: 22px; margin: 0 0 var(--yp-space-2); }
.yp-editorial .yp-e-post-card p { margin: 0; }
.yp-editorial .yp-e-post-list { margin-top: var(--yp-space-10); }
.yp-editorial .yp-e-post-meta { display: flex; gap: var(--yp-space-3); align-items: center; margin-bottom: var(--yp-space-3); }
.yp-editorial .yp-e-post-card:hover { border-color: var(--yp-control-border); }
.yp-editorial .yp-e-post-tag { display: inline-block; background: var(--yp-subtle); padding: var(--yp-space-1) var(--yp-space-3); border-radius: var(--yp-radius-pill); }
.yp-editorial :where(.yp-e-cta-banner,.yp-e-cta-card) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--yp-space-5); padding: var(--yp-space-6); background: var(--yp-accent-soft); border: 1px solid var(--yp-border); border-radius: var(--yp-radius-lg); text-decoration: none; }
.yp-editorial .yp-e-cta-big { font-weight: 700; }
.yp-editorial blockquote { margin-inline: 0; padding: var(--yp-space-5); border-left: 4px solid var(--yp-control-border); background: var(--yp-subtle); }
.yp-editorial .yp-e-post-faq details { border: 1px solid var(--yp-border); border-radius: var(--yp-radius-md); background: var(--yp-surface); padding: var(--yp-space-4) var(--yp-space-5); margin-block: var(--yp-space-3); }
.yp-editorial .yp-e-post-faq summary { cursor: pointer; font-weight: 650; }
.yp-editorial table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.yp-editorial :where(td,th) { padding: var(--yp-space-3); border: 1px solid var(--yp-border); text-align: left; }
@media (max-width: 1100px) {
 .yp-template .yp-t-hero { grid-template-columns: minmax(0,1fr); }
 .yp-template .yp-t-reference-player { grid-column: 1; grid-row: 4; height: auto; min-height: 320px; aspect-ratio: 16/9; }
 .yp-template .yp-t-hero .cast-panel { grid-column: 1; grid-row: 5; min-height: 0; }
 .yp-template .yp-t-hero .ref-disclaimer { grid-row: 6; }
 .yp-template .yp-t-hero .answer-card { grid-row: 7; }
}
@media (max-width: 760px) {
 .yp-template .yp-t-cols3, .yp-template .yp-t-workflow-step-grid, .yp-template .yp-t-workflow-plan-grid { grid-template-columns: minmax(0,1fr); }
 .yp-template .yp-t-hero h1 { font-size: clamp(37px,8vw,55px); }
 .yp-template .yp-t-hero .lede { font-size: 17px; }
 .yp-template .yp-t-reference-player { min-height: 240px; }
}
@media (max-width: 600px) {
 .yp-template > main, .yp-editorial { padding: var(--yp-space-8) var(--yp-space-4) var(--yp-space-12); }
 .yp-template > .yp-header { padding-inline: var(--yp-space-4); }
 .yp-template .yp-t-cols2 { grid-template-columns: minmax(0,1fr); }
 .yp-template .yp-t-bubble { max-width: 88%; }
 .yp-template .yp-t-gen-row { grid-template-columns: 1fr auto; }
 .yp-template .yp-segments { flex-wrap: wrap; }
 .yp-template .yp-segments > button { flex: 1; white-space: normal; }
 .yp-template .yp-t-section, .yp-template .yp-t-workflow-steps, .yp-template .yp-t-workflow-pricing, .yp-template .yp-t-meme-chat { margin-top: var(--yp-space-10); }
}

.yp-template .yp-t-remove { position: absolute; top: var(--yp-space-2); right: var(--yp-space-2); width: 40px; min-height: 40px; padding: 0; z-index: 1; }
.yp-template .yp-t-plan-features strong { font-size: inherit; letter-spacing: normal; line-height: inherit; }
.yp-template .yp-t-toast { position: fixed; bottom: var(--yp-space-6); right: var(--yp-space-6); max-width: min(350px,calc(100vw - 32px)); z-index: var(--yp-layer-toast); }
.yp-editorial .yp-e-cta-big { box-shadow: none; }
.yp-editorial .yp-e-post-figure figcaption { text-align: center; }
.yp-ui .yp-brand[data-variant=home] { font-size: 26px; font-weight: 900; letter-spacing: -1.6px; }
.yp-ui .yp-brand[data-variant=home] span { color: var(--yp-accent); font-size: .6em; vertical-align: super; margin-left: 0; }

/* File metadata reads as one line of information and wraps naturally. */
.yp-template .yp-upload .title { max-width: 100%; overflow-wrap: anywhere; font-size: 14px; }
.yp-template .yp-upload[aria-busy=true] { cursor: progress; }

/* Only pages explicitly consuming the shared header are migrated. */
.yp-site-header { position: sticky; top: 0; z-index: var(--yp-layer-sticky); background: var(--yp-bg); border-bottom: 1px solid var(--yp-border); }
.yp-site-header .yp-header { max-width: 1470px; margin: auto; padding: var(--yp-space-4) var(--yp-space-6); border: 0; gap: var(--yp-space-8); }
.yp-site-header .yp-header > nav { margin-left: var(--yp-space-6); align-items: center; font-weight: 650; color: var(--yp-muted); }
.yp-site-header .yp-header-actions { display: flex; align-items: center; gap: var(--yp-space-3); margin-left: auto; }
.yp-site-header .yp-brand[data-variant=home] { font-size: 29px; font-weight: 900; letter-spacing: -1.6px; }
.yp-site-header .yp-brand[data-variant=home] span { color: var(--yp-brand-mark); vertical-align: super; font-size: 13px; margin-left: var(--yp-space-1); }
.yp-site-header .yp-button { white-space: nowrap; }
.yp-site-header .yp-mobile-nav { position: relative; }
.yp-site-header .yp-mobile-nav nav { position: absolute; right: 0; top: 100%; min-width: 180px; border: 1px solid var(--yp-border); border-radius: var(--yp-radius-md); background: var(--yp-surface); box-shadow: var(--yp-shadow-popover); }
@media(max-width:1100px) { .yp-site-header .yp-header > nav { display: none; } .yp-site-header .yp-mobile-nav { display: block; } }
@media(max-width:600px) { .yp-site-header .yp-header { padding: var(--yp-space-3); gap: var(--yp-space-2); flex-wrap: wrap; } .yp-site-header .yp-header-actions { gap: var(--yp-space-1); } .yp-site-header .yp-button { padding-inline: var(--yp-space-3); } .yp-site-header .yp-header-actions > a:not([data-site-account]) { display: none; } }