/* Line 16838 (wordpress-plugin-download-page-r1): /plugins/wordpress. Google path: --ns-* tokens from css/ns-tokens.css
   (light and dark), 375 px first, one filled next step (Download). */
.ns-wpp { max-width: 880px; margin: 0 auto; padding: 16px 0 24px; font-family: var(--ns-font, system-ui, sans-serif); color: var(--ns-text, #202124); }
.ns-wpp code { font-size: .875em; padding: 1px 5px; border-radius: 4px; background: var(--ns-surface, #f1f3f4); color: inherit; overflow-wrap: anywhere; }
.ns-wpp-head { text-align: left; }
.ns-wpp-kicker { margin: 0 0 4px; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ns-text-2, #5f6368); }
.ns-wpp-title { margin: 0; font-size: clamp(1.75rem, 6vw, 2.75rem); font-weight: 500; line-height: 1.15; color: var(--ns-text, #202124); }
.ns-wpp-lead { margin: 12px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ns-text, #202124); max-width: 640px; }
.ns-wpp-download { margin: 20px 0 0; }
.ns-wpp-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 24px; font: inherit; font-weight: 500; color: var(--ns-on-accent, #202124); background: var(--ns-gold, #f9ab00); border: 0; border-radius: 999px; text-decoration: none; box-sizing: border-box; }
.ns-wpp-btn:hover, .ns-wpp-btn:focus-visible { background: var(--ns-gold-light, #fdd663); color: var(--ns-on-accent, #202124); }
.ns-wpp-btn:focus-visible, .ns-wpp-link:focus-visible { outline: 2px solid var(--ns-gold, #f9ab00); outline-offset: 2px; }
.ns-wpp-quiet { margin: 8px 0 0; font-size: .875rem; color: var(--ns-text-2, #5f6368); }
.ns-wpp-h2 { margin: 0 0 12px; font-size: 1.375rem; font-weight: 500; color: var(--ns-text, #202124); }
.ns-wpp-h3 { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 500; color: var(--ns-text, #202124); }
.ns-wpp-demo, .ns-wpp-steps, .ns-wpp-key { margin-top: 36px; }

/* The live example: a sample site with the host on its corner. */
.ns-wpp-site { border: 1px solid var(--ns-border, rgba(60, 64, 67, .14)); border-radius: var(--ns-radius, 12px); overflow: hidden; background: var(--ns-card, #fff); }
.ns-wpp-site-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--ns-surface, #f1f3f4); }
.ns-wpp-site-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ns-border-strong, rgba(60, 64, 67, .26)); }
.ns-wpp-site-bar em { margin-left: 8px; font-style: normal; font-size: .8125rem; color: var(--ns-text-2, #5f6368); }
.ns-wpp-site-body { display: grid; gap: 16px; padding: 16px; }
.ns-wpp-site-page { display: grid; gap: 10px; align-content: start; }
.ns-wpp-line { display: block; height: 10px; border-radius: 5px; background: var(--ns-surface, #f1f3f4); }
.ns-wpp-line--h { width: 60%; height: 16px; }
.ns-wpp-line--s { width: 40%; }
.ns-wpp-host { display: grid; justify-items: center; gap: 10px; padding: 12px; border-radius: var(--ns-radius, 12px); background: var(--ns-surface, #f1f3f4); border: 1px solid var(--ns-gold-border, rgba(176, 96, 0, .3)); }
.ns-wpp-morph { position: relative; width: 100%; height: 220px; }
.ns-wpp-face { display: grid; justify-items: center; font-family: ui-monospace, 'Roboto Mono', Menlo, monospace; font-size: 2rem; line-height: 1.05; color: var(--ns-gold, #f9ab00); padding: 18px 0 6px; }
.ns-wpp-face-brows { font-size: 1.25rem; }
.ns-wpp-face-eyes { animation: ns-wpp-blink 4.2s infinite; transform-origin: 50% 55%; }
.ns-wpp-face-mouth { font-size: 1.5rem; }
@keyframes ns-wpp-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .ns-wpp-face-eyes { animation: none; } }
.ns-wpp-greeting { margin: 0; max-width: 320px; text-align: center; font-size: .9375rem; line-height: 1.45; color: var(--ns-text, #202124); }

/* Install steps with drawn wp-admin screens. */
.ns-wpp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: wpp; }
.ns-wpp-step { counter-increment: wpp; position: relative; padding: 16px; border: 1px solid var(--ns-border, rgba(60, 64, 67, .14)); border-radius: var(--ns-radius, 12px); background: var(--ns-card, #fff); }
.ns-wpp-step::before { content: counter(wpp); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 8px; border-radius: 50%; font-weight: 500; color: var(--ns-on-accent, #202124); background: var(--ns-gold, #f9ab00); }
.ns-wpp-step p { margin: 0; line-height: 1.5; }
.ns-wpp-shot { margin: 12px 0 0; }
.ns-wpp-shot svg { display: block; width: 100%; height: auto; }
.ns-wpp-shot figcaption { margin-top: 6px; font-size: .8125rem; color: var(--ns-text-2, #5f6368); }
.ns-wpp-shot .s-bg { fill: var(--ns-bg-deep, #f8f9fa); stroke: var(--ns-border, rgba(60, 64, 67, .14)); }
.ns-wpp-shot .s-side { fill: #1d2327; }
.ns-wpp-shot .s-ink2 { fill: #50575e; }
.ns-wpp-shot .s-hl { fill: #2271b1; }
.ns-wpp-shot .s-card { fill: var(--ns-card, #fff); stroke: var(--ns-border-strong, rgba(60, 64, 67, .26)); }
.ns-wpp-shot .s-field { fill: var(--ns-bg, #fff); stroke: var(--ns-border-strong, rgba(60, 64, 67, .26)); }
.ns-wpp-shot .s-btn { fill: #2271b1; }
.ns-wpp-shot .s-btn2 { fill: none; stroke: #2271b1; }
.ns-wpp-shot .s-t { font: 7px/1 var(--ns-font, system-ui, sans-serif); fill: var(--ns-text, #202124); }
.ns-wpp-shot .s-h { font-size: 10px; font-weight: 500; }
.ns-wpp-shot .s-on { fill: #fff; }

/* Where to find your host name, and the sell step. */
.ns-wpp-key p { margin: 0 0 8px; line-height: 1.5; }
.ns-wpp-owner { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ns-wpp-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ns-gold-light, #b06000); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ns-wpp-row { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ns-wpp-sell { padding: 32px 16px; background: var(--ns-surface, #f1f3f4); color: var(--ns-text, #202124); font-family: var(--ns-font, system-ui, sans-serif); }
.ns-wpp-sell-in { max-width: 880px; margin: 0 auto; }
.ns-wpp-sell p { margin: 0 0 16px; line-height: 1.5; }

@media (min-width: 768px) {
    .ns-wpp { padding-top: 40px; }
    .ns-wpp-btn { width: auto; }
    .ns-wpp-site-body { grid-template-columns: 1fr 300px; padding: 24px; }
    .ns-wpp-list { grid-template-columns: repeat(3, 1fr); }
}