/**
 * BlogMarks theme dashboard (Appearance › BlogMarks).
 * Loaded on that page only; every rule is scoped to it.
 */

/* Full-width header: remove the admin content padding on this page only. */
.blogmarks-dashboard-page #wpcontent,
.blogmarks-dashboard-page.auto-fold #wpcontent {
    padding-right: 0;
}
@media screen and (max-width: 782px) {
    .blogmarks-dashboard-page.auto-fold #wpcontent {
        padding-right: 0;
    }
}

.blogmarks-dash {
    --nb-accent: #2271b1;
    --nb-accent-hover: #135e96;
    --nb-accent-soft: #f0f6fc;
    --nb-ink: #1d2327;
    --nb-text: #3c434a;
    --nb-muted: #50575e;
    --nb-subtle: #646970;
    --nb-line: #dcdcde;
    --nb-line-soft: #f0f0f1;
    --nb-success: #00a32a;
    --nb-success-ink: #00721c;
    --nb-success-soft: #edfaef;
    --nb-dark: #1d2327;
    --nb-dark-line: #3c434a;
    --nb-dark-accent: #72aee6;
    --nb-radius: 8px;
    color: var(--nb-text);
    font-size: 14px;
    line-height: 1.5;
}
.blogmarks-dash *,
.blogmarks-dash *::before,
.blogmarks-dash *::after {
    box-sizing: border-box;
}
.blogmarks-dash h1,
.blogmarks-dash h2,
.blogmarks-dash h3 {
    color: var(--nb-ink);
    margin: 0;
    padding: 0;
}
.blogmarks-dash p {
    margin: 0;
    font-size: 14px;
}
.blogmarks-dash a {
    color: var(--nb-accent);
}
.blogmarks-dash a:hover {
    color: var(--nb-accent-hover);
}
.blogmarks-dash .blogmarks-icon {
    flex-shrink: 0;
}
.blogmarks-dash__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Header */
.blogmarks-dash__header {
    background: #fff;
    border-bottom: 1px solid var(--nb-line);
    padding-top: 24px;
}
.blogmarks-dash__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.blogmarks-dash__title {
    flex: 1 1 260px;
    min-width: 0;
}
.blogmarks-dash__title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.blogmarks-dash__title h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}
.blogmarks-dash__title p {
    margin-top: 4px;
    color: var(--nb-muted);
}
.blogmarks-dash__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.blogmarks-dash__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 20px;
}
.blogmarks-dash__tabs a {
    padding: 12px 14px;
    color: var(--nb-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
}
.blogmarks-dash__tabs a:hover {
    color: var(--nb-ink);
}
.blogmarks-dash__tabs a.is-active {
    color: var(--nb-ink);
    font-weight: 600;
    border-bottom-color: var(--nb-accent);
}
.blogmarks-dash__tabs a:focus {
    box-shadow: none;
    outline: 2px solid var(--nb-accent);
    outline-offset: -2px;
}
.blogmarks-dash .wp-header-end {
    display: none;
}
.blogmarks-dash__body {
    padding: 28px 0 56px;
}

/* Buttons, pills, links */
.blogmarks-dash .blogmarks-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
}
.blogmarks-dash .blogmarks-button--small {
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
}
.blogmarks-dash .blogmarks-button {
    gap: 6px;
}
.blogmarks-dash .blogmarks-upgrade-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 4px;
    background: #f0c33c;
    color: #1d2327;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(29, 35, 39, 0.08);
}
.blogmarks-dash .blogmarks-upgrade-button:hover,
.blogmarks-dash .blogmarks-upgrade-button:focus {
    background: #dba617;
    color: #1d2327;
}
.blogmarks-dash .blogmarks-upgrade-button:focus {
    outline: 2px solid #1d2327;
    outline-offset: 2px;
}
.blogmarks-dash .blogmarks-upgrade-button--large {
    min-height: 46px;
    padding: 0 22px;
    font-size: 15px;
}
.blogmarks-link-strong {
    font-weight: 600;
    text-decoration: none;
}
.blogmarks-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--nb-line-soft);
    color: var(--nb-text);
    font-size: 12px;
    line-height: 1.5;
}
.blogmarks-pill--pro {
    background: #fcf9e8;
    color: #6e4e00;
    font-weight: 600;
}
.blogmarks-pill--blue {
    background: var(--nb-accent-soft);
    color: var(--nb-accent-hover);
    font-weight: 600;
    font-size: 11px;
}
.blogmarks-eyebrow {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nb-muted) !important;
}
.blogmarks-tile {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--nb-accent-soft);
    color: var(--nb-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.blogmarks-tile--gold {
    background: #fcf9e8;
    color: #996800;
}

/* Layout */
.blogmarks-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}
.blogmarks-layout__main {
    flex: 999 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.blogmarks-layout__side {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.blogmarks-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.blogmarks-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.blogmarks-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}
.blogmarks-section__head h2 {
    font-size: 20px;
    font-weight: 600;
}
.blogmarks-section__head p {
    margin-top: 4px;
    color: var(--nb-muted);
}
.blogmarks-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.blogmarks-grid > * {
    flex: 1 1 300px;
    min-width: 0;
}
.blogmarks-grid--wide > * {
    flex-basis: 440px;
}
.blogmarks-card {
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: var(--nb-radius);
}

/* Setup checklist */
.blogmarks-setup__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--nb-line-soft);
}
.blogmarks-setup__head h2 {
    font-size: 18px;
    font-weight: 600;
}
.blogmarks-setup__head p {
    margin-top: 4px;
    color: var(--nb-muted);
}
.blogmarks-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}
.blogmarks-progress__bar {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: var(--nb-line-soft);
    overflow: hidden;
}
.blogmarks-progress__bar > span {
    display: block;
    height: 100%;
    background: var(--nb-accent);
}
.blogmarks-progress__label {
    font-size: 13px;
    white-space: nowrap;
}
.blogmarks-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blogmarks-step {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--nb-line-soft);
}
.blogmarks-step:last-child {
    border-bottom: 0;
}
.blogmarks-step__status {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #c3c4c7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.blogmarks-step.is-next .blogmarks-step__status {
    border-color: var(--nb-accent);
}
.blogmarks-step.is-done .blogmarks-step__status {
    border-color: var(--nb-success);
    background: var(--nb-success);
    color: #fff;
}
.blogmarks-step__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.blogmarks-step__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--nb-ink);
}
.blogmarks-step.is-done .blogmarks-step__title {
    color: var(--nb-muted);
    text-decoration: line-through;
}
.blogmarks-step__meta {
    font-size: 13px;
    color: var(--nb-subtle);
}
.blogmarks-step__done {
    font-size: 13px;
    font-weight: 600;
    color: var(--nb-success-ink);
}

/* Customizer shortcuts */
.blogmarks-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.blogmarks-shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: var(--nb-radius);
    color: var(--nb-ink) !important;
    font-weight: 600;
    text-decoration: none;
}
.blogmarks-shortcut .blogmarks-tile {
    width: 36px;
    height: 36px;
}
.blogmarks-shortcut:hover,
.blogmarks-service:hover,
.blogmarks-shortcut:focus,
.blogmarks-service:focus {
    border-color: var(--nb-accent);
}

.blogmarks-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.blogmarks-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--nb-line);
    border-radius: 999px;
    background: #fff;
    color: var(--nb-ink) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.blogmarks-chip:hover,
.blogmarks-chip:focus {
    border-color: var(--nb-accent);
}

/* Services spotlight and featured service */
.blogmarks-spotlight,
.blogmarks-feature {
    background: var(--nb-dark);
    color: #f0f0f1;
    border-radius: var(--nb-radius);
    padding: 24px;
}
.blogmarks-spotlight {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.blogmarks-spotlight__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nb-dark-accent);
}
.blogmarks-dash .blogmarks-spotlight h2,
.blogmarks-dash .blogmarks-feature h3 {
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
}
.blogmarks-spotlight p,
.blogmarks-feature p {
    color: #c3c4c7;
}
.blogmarks-spotlight ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blogmarks-spotlight li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f0f0f1;
}
.blogmarks-spotlight li .blogmarks-icon {
    color: var(--nb-dark-accent);
}
.blogmarks-spotlight__actions,
.blogmarks-feature__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.blogmarks-dash .blogmarks-spotlight__button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 4px;
    background: #fff;
    color: var(--nb-ink);
    font-weight: 600;
    text-decoration: none;
}
.blogmarks-dash .blogmarks-spotlight__button:hover,
.blogmarks-dash .blogmarks-spotlight__button:focus {
    background: #f0f0f1;
    color: var(--nb-ink);
}
.blogmarks-dash .blogmarks-spotlight__link {
    color: var(--nb-dark-accent);
    font-weight: 600;
    text-decoration: none;
}
.blogmarks-dash .blogmarks-spotlight__link:hover {
    color: #fff;
}
.blogmarks-feature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 28px;
}
.blogmarks-feature__text {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.blogmarks-dash .blogmarks-feature h3 {
    font-size: 22px;
}
.blogmarks-feature p {
    font-size: 15px;
    max-width: 560px;
}
.blogmarks-feature__chip {
    align-self: flex-start;
    padding: 3px 10px;
    border: 1px solid var(--nb-dark-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nb-dark-accent);
}

/* Service and help cards */
.blogmarks-service {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    color: var(--nb-ink) !important;
    text-decoration: none;
}
.blogmarks-service__title {
    font-size: 16px;
    font-weight: 600;
}
.blogmarks-service__desc {
    color: var(--nb-muted);
}
.blogmarks-service__more {
    margin-top: auto;
    font-weight: 600;
    color: var(--nb-accent);
}

/* Link list, review, pro */
.blogmarks-links {
    padding: 8px 0;
}
.blogmarks-links h2 {
    padding: 12px 20px 8px;
}
.blogmarks-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--nb-ink);
    text-decoration: none;
}
.blogmarks-links button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    background: none;
    color: var(--nb-ink);
    font: inherit;
    text-align: right;
    cursor: pointer;
}
.blogmarks-links a:hover,
.blogmarks-links button:hover {
    background: #f6f7f7;
    color: var(--nb-ink);
}
.blogmarks-links a .blogmarks-icon,
.blogmarks-links button .blogmarks-icon {
    color: var(--nb-muted);
}
button.blogmarks-service {
    font: inherit;
    text-align: right;
    cursor: pointer;
}
.blogmarks-review {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blogmarks-review h2,
.blogmarks-pro h2 {
    font-size: 15px;
    font-weight: 600;
}
.blogmarks-review p {
    color: var(--nb-muted);
}
.blogmarks-pro {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Plugins */
.blogmarks-plugin {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
}
.blogmarks-plugin img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    flex-shrink: 0;
}
.blogmarks-plugin__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.blogmarks-plugin__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--nb-ink);
}
.blogmarks-plugin__desc {
    color: var(--nb-muted);
}
.blogmarks-plugin__text a {
    text-decoration: none;
}
.blogmarks-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 4px;
    background: var(--nb-success-soft);
    color: var(--nb-success-ink);
    font-size: 13px;
    font-weight: 600;
}

/* WordPress.org themes (loaded on demand) */
.blogmarks-themes__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.blogmarks-themes.is-loaded .blogmarks-themes__intro {
    display: none;
}
.blogmarks-themes__note {
    font-size: 13px;
    color: var(--nb-subtle);
}
.blogmarks-themes__status:empty {
    display: none;
}
.blogmarks-themes__status {
    color: var(--nb-muted);
}
.blogmarks-themes__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.blogmarks-themes__grid:empty {
    display: none;
}
.blogmarks-theme-card {
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: var(--nb-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.blogmarks-theme-card__shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--nb-line-soft);
    border-bottom: 1px solid var(--nb-line-soft);
}
.blogmarks-theme-card__body {
    flex: 1 1 auto;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.blogmarks-theme-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--nb-ink);
}
.blogmarks-theme-card__desc {
    font-size: 13px;
    color: var(--nb-muted);
}
.blogmarks-theme-card__actions {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 13px;
    font-weight: 600;
}
.blogmarks-theme-card__actions a {
    text-decoration: none;
}
.blogmarks-theme-card__actions a + a {
    color: var(--nb-muted);
}
.blogmarks-theme-card.is-skeleton .blogmarks-theme-card__shot,
.blogmarks-theme-card.is-skeleton .blogmarks-skel {
    background: var(--nb-line-soft);
}
.blogmarks-skel {
    display: block;
    height: 10px;
    border-radius: 4px;
}
.blogmarks-skel + .blogmarks-skel {
    width: 70%;
}
@media (prefers-reduced-motion: no-preference) {
    .blogmarks-theme-card.is-skeleton .blogmarks-theme-card__shot,
    .blogmarks-theme-card.is-skeleton .blogmarks-skel {
        animation: blogmarks-pulse 1.4s ease-in-out infinite;
    }
}
@keyframes blogmarks-pulse {
    50% {
        opacity: 0.55;
    }
}
.blogmarks-themes__more {
    align-self: center;
}
.blogmarks-themes__more[hidden] {
    display: none;
}
.blogmarks-disclosure {
    padding-top: 16px;
    border-top: 1px solid var(--nb-line);
    font-size: 13px !important;
    color: var(--nb-subtle);
}

/* Free vs Pro */
.blogmarks-compare-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--nb-line-soft);
}
.blogmarks-compare-head h2 {
    font-size: 18px;
    font-weight: 600;
}
.blogmarks-compare-head p {
    margin-top: 4px;
    color: var(--nb-muted);
}
.blogmarks-compare-scroll {
    overflow-x: auto;
}
.blogmarks-compare {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}
.blogmarks-compare th,
.blogmarks-compare td {
    padding: 10px 24px;
    border-bottom: 1px solid var(--nb-line-soft);
    text-align: right;
    font-weight: 400;
    color: var(--nb-text);
}
.blogmarks-compare thead th {
    font-weight: 600;
    color: var(--nb-ink);
    background: #f6f7f7;
}
.blogmarks-compare td,
.blogmarks-compare thead th + th {
    width: 22%;
    text-align: center;
}
.blogmarks-compare__group th {
    padding-top: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nb-muted);
}
.blogmarks-yes {
    color: var(--nb-success);
    display: inline-flex;
}
.blogmarks-no {
    color: #a7aaad;
}

/* Upgrade CTA (below the comparison table) */
.blogmarks-upgrade {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid #f2d675;
    border-radius: 10px;
    background: #fcf9e8;
}
.blogmarks-upgrade__text {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.blogmarks-upgrade__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6e4e00;
}
.blogmarks-dash .blogmarks-upgrade h2 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}
.blogmarks-upgrade ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.blogmarks-upgrade li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--nb-ink);
}
.blogmarks-upgrade li .blogmarks-icon {
    color: var(--nb-success);
}
.blogmarks-upgrade__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* Starter sites */
.blogmarks-sites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.blogmarks-site {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--nb-line);
    border-radius: var(--nb-radius);
    overflow: hidden;
}
.blogmarks-site:hover,
.blogmarks-site:focus-within {
    border-color: var(--nb-accent);
}
.blogmarks-site__shot {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--nb-line-soft);
    border-bottom: 1px solid var(--nb-line-soft);
}
.blogmarks-site__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.blogmarks-site__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}
.blogmarks-dash .blogmarks-site__name {
    font-size: 16px;
    font-weight: 600;
}
.blogmarks-site__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.blogmarks-site__body {
    flex: 1 1 auto;
}
.blogmarks-site__shot {
    position: relative;
}
.blogmarks-site--pro {
    border-color: #f2d675;
}
.blogmarks-site--pro:hover,
.blogmarks-site--pro:focus-within {
    border-color: #dba617;
}
.blogmarks-site__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #f0c33c;
    color: #1d2327;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.blogmarks-site__note {
    color: var(--nb-muted);
    font-size: 13px !important;
}
.blogmarks-import-note {
    overflow: hidden;
}
.blogmarks-import-note__main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
}
.blogmarks-import-note__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.blogmarks-dash .blogmarks-import-note__text h3 {
    font-size: 15px;
    font-weight: 600;
}
.blogmarks-import-note__text p {
    color: var(--nb-muted);
    max-width: 760px;
}
.blogmarks-import-note__tip {
    font-size: 13px !important;
    color: var(--nb-subtle) !important;
}
.blogmarks-import-note__service {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--nb-line-soft);
    background: #f6f7f7;
}
.blogmarks-import-note__service p {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--nb-text);
}
.blogmarks-import-note__service .blogmarks-icon {
    color: var(--nb-accent);
    margin-top: 1px;
}

/* "What's new" drawer */
.blogmarks-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(480px, 100%);
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0 auto 0 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: var(--nb-text);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
}
.blogmarks-drawer::backdrop {
    background: rgba(29, 35, 39, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
    .blogmarks-drawer[open] {
        animation: blogmarks-drawer-in 0.22s ease-out;
    }
}
@keyframes blogmarks-drawer-in {
    from {
        transform: translateX(-32px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
.blogmarks-drawer__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blogmarks-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--nb-line-soft);
}
.blogmarks-dash .blogmarks-drawer__head h2 {
    font-size: 20px;
    font-weight: 600;
}
.blogmarks-drawer__head p {
    margin-top: 4px;
    color: var(--nb-muted);
}
.blogmarks-drawer__close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--nb-muted);
    cursor: pointer;
}
.blogmarks-drawer__close:hover,
.blogmarks-drawer__close:focus {
    background: var(--nb-line-soft);
    color: var(--nb-ink);
}
.blogmarks-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 24px 32px;
}
.blogmarks-release {
    padding: 20px 0;
    border-bottom: 1px solid var(--nb-line-soft);
}
.blogmarks-release:last-child {
    border-bottom: 0;
}
.blogmarks-release__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.blogmarks-release__version {
    font-size: 16px;
    font-weight: 700;
    color: var(--nb-ink);
}
.blogmarks-release__head time {
    margin-right: auto;
    font-size: 13px;
    color: var(--nb-subtle);
}
.blogmarks-release__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.blogmarks-change {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}
.blogmarks-badge {
    flex-shrink: 0;
    min-width: 96px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
}
.blogmarks-badge--security {
    background: #fcf0f1;
    color: #8a2424;
}
.blogmarks-badge--new {
    background: #edfaef;
    color: #00631a;
}
.blogmarks-badge--enhancement {
    background: #f0f6fc;
    color: #0a4b78;
}
.blogmarks-badge--improvement {
    background: #f3f0fa;
    color: #5b3fa0;
}
.blogmarks-badge--fix {
    background: #fcf0e3;
    color: #8a4a00;
}
.blogmarks-badge--dev,
.blogmarks-badge--other {
    background: var(--nb-line-soft);
    color: var(--nb-text);
}
.blogmarks-change__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--nb-text);
}

/* Starter sites empty state */
.blogmarks-empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.blogmarks-empty img {
    border-radius: 8px;
}
.blogmarks-empty h2 {
    font-size: 18px;
    font-weight: 600;
}
.blogmarks-empty p {
    color: var(--nb-muted);
}

/* Feature illustrations (Overview). HTML and CSS only; motion is opt-in below. */
.blogmarks-promos {
    margin-top: 40px;
}
.blogmarks-promo {
    --nb-brand: #4c5bff;
    --nb-brand-ink: #3340e6;
    --nb-brand-soft: #eef0ff;
    --nb-lens: #a9b1ff;
    --nb-ping: rgba(76, 91, 255, 0.5);
    --nb-focus: #f0b849;
    --nb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --nb-float: 0 1px 2px rgba(29, 35, 39, 0.06), 0 10px 24px -14px rgba(29, 35, 39, 0.35);
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 32px;
    align-items: center;
    padding: 28px;
    border: 1px solid var(--nb-line);
    border-radius: 12px;
    background: radial-gradient(60% 90% at 0% 100%, rgba(169, 177, 255, 0.22), transparent 70%), #fff;
}
.blogmarks-promo--seo {
    --nb-ping: rgba(0, 163, 42, 0.45);
    background: radial-gradient(60% 90% at 0% 100%, rgba(104, 222, 160, 0.2), transparent 70%), #fff;
}
.blogmarks-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 9px 4px 12px;
    border-radius: 999px;
    background: var(--nb-brand-soft);
    color: var(--nb-brand-ink);
    font-family: var(--nb-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.blogmarks-promo--seo .blogmarks-promo__badge {
    background: var(--nb-success-soft);
    color: var(--nb-success-ink);
}
.blogmarks-promo__badge i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.blogmarks-dash .blogmarks-promo h3 {
    margin: 14px 0 8px;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.blogmarks-promo__copy > p {
    color: var(--nb-muted);
}
.blogmarks-promo__list {
    display: grid;
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.blogmarks-promo__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--nb-ink);
}
.blogmarks-promo__list .blogmarks-icon {
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 50%;
    background: var(--nb-ink);
    color: #fff;
}
.blogmarks-promo__note {
    display: inline-block;
    margin-top: 18px;
    padding: 3px 9px;
    border: 1px solid var(--nb-line);
    border-radius: 6px;
    font-family: var(--nb-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--nb-subtle);
}
.blogmarks-promo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 20px;
}
.blogmarks-promo__demos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Demo frames */
.blogmarks-demo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 300px;
    margin: 0;
    padding: 14px;
    border-radius: 14px;
    background: #f6f7f7;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.blogmarks-demo__cap {
    margin-top: auto;
    font-family: var(--nb-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nb-subtle);
}
.blogmarks-demo__cap em {
    font-style: normal;
    color: var(--nb-brand-ink);
    transition: opacity 0.4s;
}
.blogmarks-demo__cap em::before {
    content: "· ";
}
.blogmarks-reader.is-touched .blogmarks-demo__cap em {
    opacity: 0;
}
.blogmarks-reader,
.blogmarks-keys {
    height: 372px;
}
.blogmarks-demo__lines {
    display: grid;
    gap: 6px;
}
.blogmarks-demo__lines i {
    height: 6px;
    border-radius: 3px;
    background: var(--nb-line-soft);
}
.blogmarks-demo__lines i:nth-child(2) {
    width: 85%;
}
.blogmarks-demo__lines i:nth-child(3) {
    width: 60%;
}
.blogmarks-demo__dots {
    display: flex;
    gap: 4px;
}
.blogmarks-demo__dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nb-line);
}

/* Reader toolbar demo */
.blogmarks-reader__page {
    --rp-bg: #fff;
    --rp-ink: var(--nb-ink);
    --rp-text: var(--nb-muted);
    --rp-link: var(--nb-brand-ink);
    --rp-line: var(--nb-line);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 0;
    min-height: 0;
    padding: 12px 14px 14px;
    border-radius: 12px;
    background: var(--rp-bg);
    box-shadow: var(--nb-float);
    overflow: hidden;
    transition: background-color 0.45s ease;
}
.blogmarks-reader__banner {
    position: relative;
    flex: 0 0 auto;
    height: 52px;
    border-radius: 9px;
    background: linear-gradient(-135deg, var(--nb-lens), var(--nb-brand));
    overflow: hidden;
    transition: filter 0.45s;
}
.blogmarks-reader__banner i {
    position: absolute;
    top: 50%;
    right: 18%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
}
.blogmarks-reader__banner i:nth-child(2) {
    right: 52%;
    width: 14px;
    height: 14px;
    margin-top: -2px;
}
.blogmarks-reader__banner i:nth-child(3) {
    right: 74%;
    width: 34px;
    height: 34px;
    margin-top: -22px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.3);
}
.blogmarks-reader__kicker {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rp-link);
    transition: color 0.45s;
}
.blogmarks-reader__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rp-ink);
    transition: font-size 0.45s, color 0.45s, letter-spacing 0.45s;
}
.blogmarks-reader__text {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--rp-text);
    transition: font-size 0.45s, line-height 0.45s, color 0.45s, letter-spacing 0.45s;
}
.blogmarks-reader__text u {
    text-decoration: none;
    color: var(--rp-link);
    border-radius: 3px;
    transition: background-color 0.35s, box-shadow 0.35s, color 0.35s;
}
.blogmarks-reader__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}
.blogmarks-reader__row > span {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border: 1px solid var(--rp-line);
    border-radius: 8px;
    font-size: 10.5px;
    color: var(--rp-ink);
    white-space: nowrap;
    transition: font-size 0.45s, color 0.45s, border-color 0.45s;
}
.blogmarks-reader__row i {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--nb-brand-soft);
}
.blogmarks-reader__row > span:last-child i {
    background: #fde7d6;
}
.blogmarks-reader__row em {
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
}
/* Narrow demo: drop the chip icons so the labels stay readable. */
.blogmarks-reader__row {
    container-type: inline-size;
}
@container (max-width: 230px) {
    .blogmarks-reader__row > span {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .blogmarks-reader__row i {
        display: none;
    }
}
.blogmarks-reader__row b {
    font-weight: 600;
}
.blogmarks-reader__mask {
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    height: 40px;
    box-shadow: 0 0 0 400px rgba(29, 35, 39, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}
.blogmarks-reader.is-big .blogmarks-reader__title {
    font-size: 16px;
}
.blogmarks-reader.is-big .blogmarks-reader__text {
    font-size: 13px;
}
.blogmarks-reader.is-big .blogmarks-reader__row > span {
    font-size: 11.5px;
}
.blogmarks-reader.is-contrast .blogmarks-reader__page {
    --rp-bg: #000;
    --rp-ink: #fff;
    --rp-text: #fff;
    --rp-link: #ffe600;
    --rp-line: #fff;
}
.blogmarks-reader.is-contrast .blogmarks-reader__banner {
    filter: grayscale(1) contrast(1.4);
}
.blogmarks-reader.is-contrast .blogmarks-reader__row i {
    background: #444;
}
.blogmarks-reader.is-font .blogmarks-reader__title,
.blogmarks-reader.is-font .blogmarks-reader__text,
.blogmarks-reader.is-font .blogmarks-reader__row > span {
    font-family: Verdana, Tahoma, sans-serif;
    letter-spacing: 0.04em;
    word-spacing: 0.12em;
}
.blogmarks-reader.is-font .blogmarks-reader__text {
    line-height: 1.8;
}
.blogmarks-reader.is-links .blogmarks-reader__text u {
    text-decoration: underline 2px;
    text-underline-offset: 2px;
    background: #ffe600;
    box-shadow: 0 0 0 2px #ffe600;
    color: #000;
}
.blogmarks-reader.is-mask .blogmarks-reader__mask {
    opacity: 1;
}
.blogmarks-reader__tools {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--nb-ink);
    box-shadow: 0 8px 18px -10px rgba(29, 35, 39, 0.6);
}
.blogmarks-reader__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--nb-brand);
    color: #fff;
}
.blogmarks-dash .blogmarks-reader__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #c3c4c7;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.blogmarks-dash .blogmarks-reader__tool:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
.blogmarks-dash .blogmarks-reader__tool:focus-visible {
    outline: 2px solid var(--nb-focus);
    outline-offset: 1px;
}
.blogmarks-dash .blogmarks-reader__tool[aria-pressed="true"] {
    background: #fff;
    color: var(--nb-ink);
}

/* Keyboard and screen reader demo */
.blogmarks-keys__page {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--nb-float);
}
.blogmarks-keys__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    font-size: 11px;
    color: var(--nb-text);
}
.blogmarks-keys__logo {
    width: 18px;
    height: 18px;
    margin-left: auto;
    border-radius: 5px;
    background: var(--nb-ink);
}
.blogmarks-keys__top .blogmarks-keys__stop {
    margin: -2px -5px;
    padding: 2px 5px;
}
.blogmarks-keys__search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--nb-line);
    font-size: 11px;
    color: var(--nb-subtle);
}
.blogmarks-keys__button {
    align-self: flex-start;
    padding: 6px 12px;
    background: var(--nb-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.blogmarks-keys__stop {
    border-radius: 7px;
}
.blogmarks-keys__skip {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    padding: 5px 10px;
    background: var(--nb-ink);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nb-focus);
}
.blogmarks-keys__sr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--nb-ink);
    color: #fff;
    font-family: var(--nb-mono);
    font-size: 10.5px;
}
.blogmarks-keys__sr .blogmarks-icon {
    color: var(--nb-lens);
}
.blogmarks-keys__said {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 1.5em;
}
.blogmarks-keys__said span {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
}
.blogmarks-keys__said span:first-child {
    opacity: 1;
}
.blogmarks-keys__keys {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.blogmarks-dash .blogmarks-keys__keys kbd {
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--nb-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #fff;
    font-family: var(--nb-mono);
    font-size: 10.5px;
    color: var(--nb-text);
}

/* Search preview demo */
.blogmarks-serp__page,
.blogmarks-score__page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--nb-float);
    overflow: hidden;
}
.blogmarks-serp__query {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--nb-line);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--nb-ink);
}
.blogmarks-serp__query i {
    width: 1px;
    height: 13px;
    margin-right: -4px;
    background: var(--nb-ink);
}
.blogmarks-dash .blogmarks-serp__results {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.blogmarks-serp__result {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 52px;
    margin: 0;
    padding: 0 10px 0 48px;
    border: 1px solid var(--nb-line);
    border-radius: 9px;
    background: #fff;
    line-height: 1.3;
}
.blogmarks-serp__result:not(.is-yours) {
    opacity: 0.7;
}
.blogmarks-serp__result.is-yours {
    z-index: 1;
    border-color: var(--nb-brand);
    box-shadow: 0 8px 18px -12px rgba(76, 91, 255, 0.7);
}
.blogmarks-serp__url {
    overflow: hidden;
    font-size: 10px;
    color: var(--nb-success-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.blogmarks-serp__title {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nb-brand-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.blogmarks-serp__stars {
    font-size: 9px;
    letter-spacing: 1px;
    color: #dba617;
}
.blogmarks-serp__rank {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -10px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--nb-success);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 20px;
}

/* SEO checks demo */
.blogmarks-score__page {
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-top: 18px;
}
.blogmarks-score__ring {
    position: relative;
    display: inline-flex;
}
.blogmarks-score__ring svg {
    transform: rotate(90deg);
}
.blogmarks-score__ring circle {
    fill: none;
    stroke: var(--nb-line-soft);
    stroke-width: 3.2;
}
.blogmarks-score__ring .blogmarks-score__bar {
    stroke: var(--nb-success);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 4;
}
.blogmarks-score__ring > span {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nb-success-ink);
}
.blogmarks-score__ring b {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--nb-ink);
}
.blogmarks-dash .blogmarks-score__checks {
    align-self: stretch;
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.blogmarks-score__checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 7px;
    background: var(--nb-success-soft);
    font-size: 11.5px;
    color: var(--nb-ink);
}
.blogmarks-score__checks .blogmarks-icon {
    width: 16px;
    height: 16px;
    padding: 2px;
    border-radius: 50%;
    background: var(--nb-success);
    color: #fff;
}

/* Motion: only for users who have not asked for less, and paused while off screen. */
@media (prefers-reduced-motion: no-preference) {
    .blogmarks-promo__badge i {
        animation: blogmarks-ping 2.4s ease-out infinite;
    }
    .blogmarks-reader__banner i {
        animation: blogmarks-float 7s linear infinite;
    }
    .blogmarks-reader__banner i:nth-child(2) {
        animation-delay: -2.4s;
    }
    .blogmarks-reader__banner i:nth-child(3) {
        animation-delay: -4.7s;
    }
    .blogmarks-reader__mask {
        animation: blogmarks-scan 4s ease-in-out infinite alternate;
    }
    .blogmarks-keys__stop,
    .blogmarks-keys__said span {
        animation-duration: 8s;
        animation-iteration-count: infinite;
        animation-delay: calc(var(--i, 0) * 2s);
    }
    .blogmarks-keys__stop {
        animation-name: blogmarks-focus;
        animation-timing-function: steps(1, end);
    }
    .blogmarks-keys__skip {
        animation-name: blogmarks-skip;
        animation-timing-function: ease;
    }
    .blogmarks-keys__said span {
        animation-name: blogmarks-said;
    }
    .blogmarks-keys__tab {
        animation: blogmarks-key 2s ease-out infinite;
    }
    .blogmarks-serp__query i {
        animation: blogmarks-blink 1s steps(1, end) infinite;
    }
    .blogmarks-dash .blogmarks-serp__results {
        animation: blogmarks-cycle 7s ease infinite;
    }
    .blogmarks-serp__result {
        animation-duration: 7s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }
    .blogmarks-serp__result.is-yours {
        animation-name: blogmarks-climb;
    }
    .blogmarks-serp__result:nth-child(2) {
        animation-name: blogmarks-drop-second;
    }
    .blogmarks-serp__result:nth-child(3) {
        animation-name: blogmarks-drop-third;
    }
    .blogmarks-serp__rank {
        animation: blogmarks-rank 7s ease-out infinite;
    }
    .blogmarks-score__bar {
        animation: blogmarks-gauge 7s ease-out infinite;
    }
    .blogmarks-score__checks li,
    .blogmarks-score__checks .blogmarks-icon {
        animation-duration: 7s;
        animation-iteration-count: infinite;
        animation-delay: calc(var(--i, 0) * 0.5s + 0.6s);
        animation-fill-mode: backwards;
    }
    .blogmarks-score__checks li {
        animation-name: blogmarks-tick;
    }
    .blogmarks-score__checks .blogmarks-icon {
        animation-name: blogmarks-tick-icon;
    }
    .blogmarks-promo.is-paused,
    .blogmarks-promo.is-paused * {
        animation-play-state: paused !important;
    }
}
@keyframes blogmarks-ping {
    0% {
        box-shadow: 0 0 0 0 var(--nb-ping);
    }
    70%,
    100% {
        box-shadow: 0 0 0 7px transparent;
    }
}
@keyframes blogmarks-float {
    from {
        right: -40px;
        transform: rotate(0deg);
    }
    to {
        right: 100%;
        transform: rotate(-180deg);
    }
}
@keyframes blogmarks-scan {
    from {
        transform: translateY(-36px);
    }
    to {
        transform: translateY(26px);
    }
}
@keyframes blogmarks-focus {
    0% {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nb-focus);
    }
    25%,
    100% {
        box-shadow: none;
    }
}
@keyframes blogmarks-skip {
    0%,
    22% {
        opacity: 1;
        transform: none;
    }
    25%,
    97% {
        opacity: 0;
        transform: translateY(-160%);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes blogmarks-said {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    4%,
    22% {
        opacity: 1;
        transform: none;
    }
    25%,
    100% {
        opacity: 0;
    }
}
@keyframes blogmarks-key {
    0%,
    10% {
        transform: translateY(1px);
        border-bottom-width: 1px;
        background-color: var(--nb-brand-soft);
    }
    25%,
    100% {
        transform: none;
    }
}
@keyframes blogmarks-blink {
    50% {
        opacity: 0;
    }
}
@keyframes blogmarks-cycle {
    0% {
        opacity: 0;
    }
    5%,
    90% {
        opacity: 1;
    }
    97%,
    100% {
        opacity: 0;
    }
}
@keyframes blogmarks-climb {
    0%,
    18% {
        transform: translateY(120px);
    }
    32% {
        transform: translateY(60px);
    }
    46%,
    100% {
        transform: none;
    }
}
@keyframes blogmarks-drop-second {
    0%,
    32% {
        transform: translateY(-60px);
    }
    46%,
    100% {
        transform: none;
    }
}
@keyframes blogmarks-drop-third {
    0%,
    18% {
        transform: translateY(-60px);
    }
    32%,
    100% {
        transform: none;
    }
}
@keyframes blogmarks-rank {
    0%,
    46% {
        opacity: 0;
        transform: scale(0.6);
    }
    54%,
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes blogmarks-gauge {
    0% {
        stroke-dashoffset: 100;
    }
    40%,
    88% {
        stroke-dashoffset: 4;
    }
    100% {
        stroke-dashoffset: 100;
    }
}
@keyframes blogmarks-tick {
    0%,
    6% {
        background-color: var(--nb-line-soft);
    }
    12%,
    86% {
        background-color: var(--nb-success-soft);
    }
    94%,
    100% {
        background-color: var(--nb-line-soft);
    }
}
@keyframes blogmarks-tick-icon {
    0%,
    6% {
        background-color: #c3c4c7;
        transform: scale(0.8);
    }
    12%,
    86% {
        background-color: var(--nb-success);
        transform: none;
    }
    94%,
    100% {
        background-color: #c3c4c7;
        transform: scale(0.8);
    }
}
@media screen and (max-width: 1200px) {
    .blogmarks-promo {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media screen and (max-width: 600px) {
    .blogmarks-promo {
        padding: 18px;
    }
    .blogmarks-promo__demos {
        grid-template-columns: minmax(0, 1fr);
    }
    .blogmarks-dash .blogmarks-promo h3 {
        font-size: 22px;
    }
}

@media screen and (max-width: 782px) {
    .blogmarks-dash__container {
        padding: 0 16px;
    }
    .blogmarks-step,
    .blogmarks-setup__head,
    .blogmarks-compare-head {
        padding-right: 16px;
        padding-left: 16px;
    }
    .blogmarks-step {
        flex-wrap: wrap;
    }
    .blogmarks-plugin {
        flex-wrap: wrap;
    }
}