html,
body {
    min-height: 100%;
    padding: 0;
    margin: 0;
}

:where(:root),
.wa-light,
.wa-dark,
.wa-invert {
    --wa-font-family-body: "Google Sans", sans-serif;
    --wa-font-family-heading: "Google Sans", sans-serif;
    --wa-font-family-code: "Google Sans", sans-serif;
    --wa-font-family-longform: "Google Sans", sans-serif;
}

wa-page[view='desktop'] {
    [slot*='navigation'] {
        border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    }
}

[slot='banner'] {
    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    background-color: var(--wa-color-surface-lowered);
}

[slot='subheader'] {
    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    background-color: #000;
    position: relative;
    top: -1px;
    text-transform: uppercase;
    font-weight: var(--wa-font-weight-semibold);
}

[slot='navigation-header'] {
    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

[slot*='navigation'] a {
    --wa-color-text-link: var(--wa-color-text-normal);
}

[slot='navigation-footer'] {
    width: 100%;
    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);

    .wa-flank {
        --flank-size: 1.25em;
    }
}

[slot='main-footer'] {
    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

/* the page's own footer only: not a card's footer, nor the buttons put in one */
wa-page > [slot='footer'] {
    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    --wa-color-text-link: var(--wa-color-text-quiet);
    background-color: var(--wa-color-surface-lowered);
    font-size: var(--wa-font-size-s);
}

wa-button[class^="social-"] wa-icon {
    transition: color 150ms ease;
}

wa-button.social-facebook:hover wa-icon,
wa-button.social-facebook:focus-visible wa-icon {
    color: #1877f2;
}

wa-button.social-x:hover wa-icon,
wa-button.social-x:focus-visible wa-icon {
    color: #000;
}

wa-button.social-linkedin:hover wa-icon,
wa-button.social-linkedin:focus-visible wa-icon {
    color: #0a66c2;
}

@media (prefers-color-scheme: dark) {
    wa-button.social-x:hover wa-icon,
    wa-button.social-x:focus-visible wa-icon {
        color: #fff;
    }
}

.custom-required-indicator {
    --wa-form-control-required-content: '(Required)';
    --wa-form-control-required-content-color: var(--wa-color-danger-on-quiet);
    --wa-form-control-required-content-offset: 0.5em;
}

.field-validation-valid {
    display: none;
}

.field-validation-error {
    display: block;
    margin-block-start: var(--wa-space-2xs);
    color: var(--wa-color-danger-on-quiet);
}

.btn-google {
    --wa-color-brand-fill-loud: #4285F4;
    --wa-color-brand-fill-normal: #4285F4;
    --wa-color-brand-border-loud: #4285F4;
    --wa-color-brand-border-normal: #4285F4;
    --wa-color-brand-on-loud: #ffffff;
    --wa-color-brand-on-normal: #ffffff;
}

.btn-facebook {
    --wa-color-brand-fill-loud: #1877F2;
    --wa-color-brand-fill-normal: #1877F2;
    --wa-color-brand-border-loud: #1877F2;
    --wa-color-brand-border-normal: #1877F2;
    --wa-color-brand-on-loud: #ffffff;
    --wa-color-brand-on-normal: #ffffff;
}

a.nav-link {
    color: var(--wa-color-text-link);
}

    a.nav-link.active {
        color: var(--wa-color-brand-fill-loud);
    }

.wa-field {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs, 0.25rem);
}

wa-input:state(user-invalid),
wa-input.input-validation-error,
wa-input[data-invalid] {
    --wa-form-control-border-color: var(--wa-color-danger-fill-loud, #c62828);
    --wa-form-control-label-color: var(--wa-color-danger-on-quiet, #c62828);
    --wa-form-control-hint-color: var(--wa-color-danger-on-quiet, #c62828);
}

.field-validation-error {
    display: block;
    margin-block-start: 0.15rem;
}

.field-validation-valid {
    display: none;
}

wa-input::part(input):-webkit-autofill,
wa-input::part(input):-webkit-autofill:hover,
wa-input::part(input):-webkit-autofill:focus,
wa-input::part(input):-webkit-autofill:active {
    background-color: transparent !important;
}

.markdown-body {
    color: var(--wa-color-text-normal);
    background: transparent;
    font-family: var(--wa-font-family-body);
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-normal);
    line-height: var(--wa-line-height-normal);
    word-wrap: break-word;
}

    .markdown-body > *:first-child {
        margin-top: 0;
    }

    .markdown-body > *:last-child {
        margin-bottom: 0;
    }

    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4,
    .markdown-body h5,
    .markdown-body h6 {
        color: var(--wa-color-text-normal);
        font-family: var(--wa-font-family-heading, var(--wa-font-family-body));
        font-weight: var(--wa-font-weight-semibold);
        line-height: var(--wa-line-height-condensed, 1.25);
        margin-top: var(--wa-space-xl);
        margin-bottom: var(--wa-space-m);
    }

    .markdown-body h1 {
        font-size: var(--wa-font-size-3xl);
    }

    .markdown-body h2 {
        font-size: var(--wa-font-size-2xl);
    }

    .markdown-body h3 {
        font-size: var(--wa-font-size-xl);
    }

    .markdown-body h4 {
        font-size: var(--wa-font-size-l);
    }

    .markdown-body h5,
    .markdown-body h6 {
        font-size: var(--wa-font-size-m);
    }

    .markdown-body h1,
    .markdown-body h2 {
        padding-bottom: var(--wa-space-xs);
        border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    }

    .markdown-body p,
    .markdown-body blockquote,
    .markdown-body ul,
    .markdown-body ol,
    .markdown-body dl,
    .markdown-body table,
    .markdown-body pre,
    .markdown-body figure {
        margin-top: 0;
        margin-bottom: var(--wa-space-m);
    }

    .markdown-body a {
        color: var(--wa-color-brand-on-quiet, var(--wa-color-brand-fill-loud));
        text-decoration: underline;
        text-underline-offset: 0.15em;
    }

        .markdown-body a:hover {
            color: var(--wa-color-brand-on-normal);
        }

    .markdown-body strong {
        font-weight: var(--wa-font-weight-semibold);
    }

    .markdown-body em {
        font-style: italic;
    }

    .markdown-body hr {
        height: 0;
        margin: var(--wa-space-xl) 0;
        border: 0;
        border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    }

    .markdown-body blockquote {
        margin-inline: 0;
        padding: var(--wa-space-s) var(--wa-space-m);
        color: var(--wa-color-text-quiet);
        border-inline-start: var(--wa-border-width-l) solid var(--wa-color-brand-border-normal);
        background: var(--wa-color-surface-lowered);
        border-radius: var(--wa-border-radius-s);
    }

    .markdown-body ul,
    .markdown-body ol {
        padding-inline-start: 1.5em;
    }

    .markdown-body li + li {
        margin-top: var(--wa-space-2xs);
    }

    .markdown-body li > ul,
    .markdown-body li > ol {
        margin-top: var(--wa-space-2xs);
        margin-bottom: 0;
    }

    .markdown-body img {
        max-width: 100%;
        height: auto;
        border-radius: var(--wa-border-radius-s);
    }

    .markdown-body code {
        font-family: var(--wa-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
        font-size: 0.875em;
        padding: 0.15em 0.4em;
        background: var(--wa-color-neutral-fill-quiet);
        border-radius: var(--wa-border-radius-s);
    }

    .markdown-body pre {
        overflow: auto;
        padding: var(--wa-space-m);
        background: var(--wa-color-surface-lowered);
        border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
        border-radius: var(--wa-border-radius-m);
    }

        .markdown-body pre code {
            padding: 0;
            background: transparent;
            font-size: var(--wa-font-size-s);
            line-height: var(--wa-line-height-normal);
        }

    .markdown-body table {
        width: 100%;
        border-collapse: collapse;
        overflow: auto;
    }

    .markdown-body th,
    .markdown-body td {
        padding: var(--wa-space-xs) var(--wa-space-s);
        border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
        text-align: start;
    }

    .markdown-body th {
        font-weight: var(--wa-font-weight-semibold);
        background: var(--wa-color-surface-raised);
    }

    .markdown-body tr:nth-child(even) td {
        background: var(--wa-color-surface-lowered);
    }

    /* GFM task lists (MarkDig UseTaskLists) */
    .markdown-body ul.contains-task-list {
        list-style: none;
        padding-inline-start: 0;
    }

    .markdown-body .task-list-item input[type="checkbox"] {
        margin-inline-end: var(--wa-space-xs);
    }

    /* MarkDig custom containers: :::info / :::warning etc. */
    .markdown-body .info,
    .markdown-body .warning,
    .markdown-body .danger,
    .markdown-body .tip {
        margin-bottom: var(--wa-space-m);
        padding: var(--wa-space-m);
        border-radius: var(--wa-border-radius-m);
        border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
        background: var(--wa-color-surface-raised);
    }

    .markdown-body .info {
        border-color: var(--wa-color-brand-border-normal);
    }

    .markdown-body .warning {
        border-color: var(--wa-color-warning-border-normal);
    }

    .markdown-body .danger {
        border-color: var(--wa-color-danger-border-normal);
    }

    .markdown-body .tip {
        border-color: var(--wa-color-success-border-normal);
    }

.recolor {
    fill: currentColor;
    stroke: currentColor;
}

.custom-icons wa-tree-item::part(expand-button) {
    rotate: none;
}

wa-tree-item a {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* The help's contents: every item, leaf or not, keeps a column for the expand button, so siblings' icons and titles
   line up, and each level steps in by one button; a guide runs down from each open branch's button. */
#docs-nav {
    --indent-size: var(--toc-button);
    --indent-guide-width: 1px;
    --indent-guide-color: color-mix(in srgb, var(--wa-color-surface-border), var(--wa-color-text-quiet) 35%);
    --toc-button: 1.25em;
    --toc-icon: 1.1em;
    --toc-gap: 0.45em;
    font-size: var(--wa-font-size-s);
}

#docs-nav wa-tree-item::part(item) {
    align-items: flex-start;
    padding-block: 0.3em;
    padding-inline-end: var(--wa-space-xs);
    border-radius: 0 var(--wa-border-radius-s) var(--wa-border-radius-s) 0;
    transition: background-color var(--wa-transition-fast) var(--wa-transition-easing);
}

#docs-nav wa-tree-item:not([selected])::part(item):hover {
    background-color: var(--wa-color-surface-raised);
}

#docs-nav wa-tree-item::part(expand-button) {
    width: var(--toc-button);
    margin-inline-end: 0.15em;
    height: 1.35em;
    font-size: 0.95em;
}

/* a page with no pages under it: the button's place kept, empty */
#docs-nav wa-tree-item:not(:has(> wa-tree-item))::part(expand-button) {
    visibility: hidden;
}

#docs-nav wa-tree-item::part(label) {
    align-items: flex-start;
    gap: var(--toc-gap);
    line-height: 1.35;
    min-width: 0;
}

#docs-nav wa-tree-item > wa-icon:not([slot]) {
    flex: none;
    width: var(--toc-icon);
    height: 1.35em;
    margin: 0;
}

/* a title with no icon among siblings with icons starts where theirs do */
:is(#docs-nav, #docs-nav wa-tree-item):has(> wa-tree-item > wa-icon:not([slot]))
    > wa-tree-item:not(:has(> wa-icon:not([slot]))) > a {
    padding-inline-start: calc(var(--toc-icon) + var(--toc-gap));
}

/* the guide through the middle of the branch's button, from below it to its last page */
#docs-nav wa-tree-item::part(children)::before {
    inset-inline-start: calc(0.1875em + var(--indent, 0px) + var(--toc-button) / 2 - var(--indent-guide-width) / 2);
    top: 0;
    bottom: 0.4em;
}

/* the open branch that holds the page shown: its guide in the brand colour */
#docs-nav wa-tree-item[expanded]:has(wa-tree-item[selected])::part(children)::before {
    border-inline-end-color: color-mix(in srgb, var(--wa-color-brand-fill-loud), transparent 35%);
}

/* the parts at the top, and the branches, stand out from the pages */
#docs-nav > wa-tree-item {
    font-weight: var(--wa-font-weight-semibold);
}

#docs-nav > wa-tree-item wa-tree-item {
    font-weight: var(--wa-font-weight-normal);
}

#docs-nav wa-tree-item:not(:has(> wa-tree-item)):not([selected]) {
    color: var(--wa-color-text-quiet);
}

#docs-nav wa-tree-item:not(:has(> wa-tree-item)):hover {
    color: var(--wa-color-text-normal);
}

#docs-nav wa-tree-item[selected] {
    color: var(--wa-color-text-normal);
}

.framed {
    display: inline-block;
    box-sizing: border-box;
    padding: var(--wa-space-s, 0.5rem);
    background-color: var(--wa-color-overlay-inline);
    border-radius: var(--wa-border-radius-l);
    overflow: hidden;
    width: 64px;
    max-height: 64px;
}

    .framed img,
    .framed svg,
    svg.framed,
    img.framed {
        display: block;
        max-inline-size: 100%;
        block-size: auto;
        border-radius: calc(var(--wa-border-radius-l) - var(--wa-space-s, 0.5rem));
    }

pre, pre code {
    font-family: "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    white-space: pre;
    tab-size: 4;
}

.subheader-tabs {
    --indicator-color: var(--wa-color-brand-fill-loud);
    --track-color: var(--wa-color-neutral-border-quiet);
    --track-width: 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    width: 100%;
    gap: var(--wa-space-2xs);
}

.subheader-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-xs) var(--wa-space-xs);
    /* the bar is black in both themes: light grey on it (the theme's quiet text is dark grey in the light one) */
    color: #c4c7d0;
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
    text-decoration: none;
    white-space: nowrap;
}

    .subheader-tab:hover {
        color: #ffffff;
    }

    .subheader-tab[aria-current="page"],
    .subheader-tab[aria-current="page"]:hover {
        color: var(--wa-color-brand);
    }

/* phones: the header in two short rows (the brand, then its buttons, Contact and the language as their icons), without
   the page's title,
   which the hero says; the menu one row that scrolls sideways (fading at its ends) rather than four rows */
@media (max-width: 600px) {
    header[slot='header'] {
        padding: var(--wa-space-s) var(--wa-space-m);
        row-gap: var(--wa-space-xs);
    }

        header[slot='header'] #brand-name {
            font-size: var(--wa-font-size-l);
        }

        header[slot='header'] .wa-heading-3xl {
            font-size: var(--wa-font-size-xl);
        }

    .header-page-title {
        display: none;
    }

        header[slot='header'] > .wa-cluster {
            gap: var(--wa-space-2xs);
        }

        header[slot='header'] wa-button[variant='brand'] > wa-icon[slot='start'] {
            display: none;
        }

    .header-contact-label,
    header[slot='header'] .language-picker-name {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .subheader-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-inline: var(--wa-space-xs);
        mask-image: linear-gradient(to right, transparent, #000 var(--wa-space-m), #000 calc(100% - var(--wa-space-xl)), transparent);
    }

        .subheader-tabs::-webkit-scrollbar {
            display: none;
        }

    .subheader-tab {
        padding-block: var(--wa-space-s);
    }
}

.blue-gradient {
    background-image: linear-gradient( to bottom, var(--wa-color-blue), var(--wa-color-blue-40) );
}

.green-gradient {
    background-image: linear-gradient( to bottom, var(--wa-color-green), var(--wa-color-green-40) );
}

.red-gradient {
    background-image: linear-gradient( to bottom, var(--wa-color-red), var(--wa-color-red-40) );
}

.indigo-gradient {
    background-image: linear-gradient( to bottom, var(--wa-color-indigo), var(--wa-color-indigo-40) );
}

/* a page's hero: at least 400px tall and as tall as its text (a long title or subtitle never runs out of it), the text
   lined up with the page's sections */
.site-header {
    box-sizing: border-box;
    min-block-size: 400px;
    display: flex;
    align-items: center;
    padding: var(--wa-space-3xl);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

    /* the page's picture (--hero-picture, set by the layout: designs drawn by ParametrIQ CAD) behind the hero's text,
       faded, and fading out towards the text on the left */
    .site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--hero-picture, none) right center / contain no-repeat;
        opacity: 0.42;
        mask-image: linear-gradient(to right, transparent 30%, #000 70%);
        pointer-events: none;
    }

    .site-header > * {
        inline-size: 100%;
        max-inline-size: 76rem;
        margin-inline: auto;
    }

    .site-header h1,
    .site-header h2 {
        margin: 0;
        text-wrap: balance;
    }

.site-content {
    padding: var(--wa-space-3xl);
    max-inline-size: 100%;
    margin-inline: auto;
}

/* phones: the hero as tall as its text, its title and subtitle in sizes a phone fits, the subtitle lighter than the
   title, and the side margins narrower */
@media (max-width: 600px) {
    .site-header {
        min-block-size: 0;
        padding: var(--wa-space-2xl) var(--wa-space-l);
    }

        /* the picture across the whole hero, fainter, behind text that fills the width */
        .site-header::before {
            background-size: auto 85%;
            background-position: right -10% bottom;
            opacity: 0.18;
            mask-image: none;
        }

        .site-header h1 {
            font-size: var(--wa-font-size-2xl);
            line-height: 1.15;
        }

        .site-header h2 {
            font-size: var(--wa-font-size-l);
            font-weight: var(--wa-font-weight-normal);
            line-height: 1.4;
            text-wrap: pretty;
        }

    .site-content {
        padding: var(--wa-space-xl) var(--wa-space-l);
    }
}

wa-page[view="desktop"] .desktop-only {
    display: none;
}

wa-page[view="mobile"] .desktop-only {
    display: block;
}

/* Marketing pages (Home, CAD) and legal pages */
.page-section {
    max-inline-size: 76rem;
    margin-inline: auto;
}

.intro-split {
    flex-wrap: wrap;
    align-items: center;
}

    .intro-split > * {
        flex: 1 1 22rem;
        min-inline-size: 0;
    }

.screenshot {
    margin: 0;
}

    .screenshot img {
        display: block;
        inline-size: 100%;
        block-size: auto;
        border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
        border-radius: var(--wa-border-radius-m);
        box-shadow: var(--wa-shadow-l);
    }

    .screenshot figcaption {
        margin-block-start: var(--wa-space-xs);
        color: var(--wa-color-text-quiet);
        font-size: var(--wa-font-size-s);
    }

.feature-grid {
    --min-column-size: 18rem;
}

.feature-icon {
    font-size: var(--wa-font-size-2xl);
    color: var(--wa-color-brand-fill-loud);
}

.steps-grid {
    --min-column-size: 14rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
    font-weight: var(--wa-font-weight-bold);
}

.tick-list {
    padding-inline-start: 1.25em;
    margin: 0;
}

    .tick-list li + li {
        margin-block-start: var(--wa-space-xs);
    }

.cta-card {
    --spacing: var(--wa-space-xl);
}

/* a free app's own page (Apps/App): its icon in the hero, and the other apps as cards to open */
.app-hero-icon {
    flex: 0 0 auto;
    font-size: 2.25rem;
    padding: var(--wa-space-s);
    border-radius: var(--wa-border-radius-l);
    background: #fff;
    color: var(--wa-color-brand);
}

.app-grid {
    --min-column-size: 17rem;
}

.app-link {
    color: inherit;
    text-decoration: none;
}

    .app-link wa-card {
        block-size: 100%;
    }

    .app-link:hover wa-card,
    .app-link:focus-visible wa-card {
        border-color: var(--wa-color-brand-border-loud);
    }

.app-title-link {
    color: inherit;
    text-decoration: none;
}

    .app-title-link:hover {
        text-decoration: underline;
    }

.table-scroll {
    overflow-x: auto;
}

/* a card's link button: a long label wraps rather than running past a narrow card */
wa-card > wa-button[slot='footer'] {
    max-inline-size: 100%;
}

    wa-card > wa-button[slot='footer']::part(base) {
        block-size: auto;
        min-block-size: var(--wa-form-control-height);
        white-space: normal;
    }

    wa-card > wa-button[slot='footer']::part(label) {
        white-space: normal;
        text-align: start;
    }

.formats-table {
    inline-size: 100%;
}

    .formats-table td:nth-child(2),
    .formats-table td:nth-child(3),
    .formats-table th:nth-child(2),
    .formats-table th:nth-child(3) {
        text-align: center;
    }

.legal {
    max-inline-size: 48rem;
    margin-inline: auto;
}

    .legal h2 {
        margin-block-start: var(--wa-space-2xl);
    }

    .legal ul {
        padding-inline-start: 1.25em;
    }

/* CAD Tools page */
.tool-grid {
    --min-column-size: 17rem;
}

.tool-card {
    display: flex;
    align-items: flex-start;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}

    .tool-card:hover,
    .tool-card:focus-visible {
        border-color: var(--wa-color-brand-border-normal);
        background: var(--wa-color-surface-lowered);
    }

.tool-icon {
    flex: 0 0 auto;
    inline-size: 32px;
    block-size: 32px;
}

/* the icons draw in black (currentColor) as images: turn them light on dark, keeping the red */
.wa-dark .tool-icon {
    filter: invert(1) hue-rotate(180deg);
}

.screenshot-narrow img {
    max-inline-size: 380px;
    margin-inline: auto;
}

/* SaaS page: code samples */
.code-sample {
    margin: 0;
    overflow: auto;
    padding: var(--wa-space-m);
    background: var(--wa-color-surface-lowered);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    font-size: var(--wa-font-size-s);
    line-height: var(--wa-line-height-normal);
}

/* a review's link as a QR code (Account › Share, the viewer's Share dialog): black on white whatever the theme, so
   phones read it */
.review-qr {
    inline-size: min(20rem, 92vw);
    padding: var(--wa-space-m, 1rem);
    border: 1px solid var(--wa-color-neutral-border-quiet, GrayText);
    border-radius: var(--wa-border-radius-l, 8px);
    background: var(--wa-color-surface-default, Canvas);
    color: var(--wa-color-text-normal, CanvasText);
    text-align: center;
}

.review-qr::backdrop {
    background: rgb(0 0 0 / 0.4);
}

.review-qr h2 {
    margin: 0 0 var(--wa-space-s);
    font-size: var(--wa-font-size-l);
}

.review-qr img {
    display: block;
    inline-size: 100%;
    max-inline-size: 232px;
    block-size: auto;
    margin-inline: auto;
    background: #fff;
    border-radius: var(--wa-border-radius-s);
}

.review-qr-link {
    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-xs);
    overflow-wrap: anywhere;
}

.review-qr-hint {
    font-size: var(--wa-font-size-s);
    text-align: start;
}

.review-qr-close {
    font: inherit;
    padding: 2px 12px;
    border-radius: var(--wa-border-radius-s);
    border: 1px solid var(--wa-color-neutral-border-normal);
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-normal);
    cursor: pointer;
}