/* Site integration and owner-requested layout adjustments. The designer stylesheet stays unchanged. */
.skip{position:fixed;left:16px;top:-100px;z-index:100;background:white;padding:12px}.skip:focus{top:12px}
.designer-form fieldset{display:contents;border:0;margin:0;padding:0;min-width:0}
.designer-form [hidden]{display:none!important}.designer-form .form-status:empty,.designer-field-error:empty{display:none}
.designer-field-error{color:#b3261e;font-size:13px;margin:0}.designer-form [aria-invalid=true]{border-color:#b3261e!important}
.designer-screen-image{display:block;width:100%;height:auto}.designer-form .form-status:focus{outline:2px solid currentColor;outline-offset:4px}
[data-legal-content] table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}[data-legal-content] td,[data-legal-content] th{padding:12px;text-align:start;border-bottom:1px solid #e5e5ea}
[data-message-privacy]{padding:0 48px 72px;max-width:760px}[data-message-privacy] h2{font-size:24px}[data-message-privacy] p{font-size:15px;line-height:1.6}
@media(max-width:1099px){[data-message-privacy]{padding:0 32px 64px}}@media(max-width:639px){[data-message-privacy]{padding:0 20px 48px}}

[data-route-anchor]{scroll-margin-top:110px}

.v-m [data-hero] nav{justify-content:center}
.v-m [data-home-card]{touch-action:pan-y pinch-zoom}
.v [data-app-id]:focus-visible{outline:2px solid #424245;outline-offset:-2px}
[data-scroll=fScroll]{
  --feature-gap:12px;
  --feature-width:min(306px,calc(100% - 40px));
  position:relative;
  gap:var(--feature-gap);
  padding-inline:0;
  scroll-padding-inline:0;
}
[data-scroll=fScroll]::before,[data-scroll=fScroll]::after{
  content:'';
  flex:0 0 calc((100% - var(--feature-width)) / 2 - var(--feature-gap));
}
[data-scroll=fScroll] > [data-fslide]{flex-basis:var(--feature-width);scroll-snap-align:center}
[data-feature-dots] > button{min-width:0}
[data-feature-dots] > button:focus-visible{outline:2px solid var(--app-accent,#c75216);outline-offset:-2px;border-radius:12px}

[data-app-notice]{
  grid-column:1 / -1;
  padding:16px 20px;
  border:1px solid #e5e5ea;
  border-radius:20px;
  background:#f5f5f7;
  color:#424245;
  font-size:14px;
  line-height:1.5;
}
[data-app-notice] strong{display:block;color:#1d1d1f}
[data-app-notice] p{margin:4px 0 0}

[data-designer-screen-slot]{display:block;height:auto;overflow:hidden;background:none;outline:1px solid rgba(29,29,31,.16);outline-offset:-1px}
.page-app [data-phone]{height:auto}
.v [data-vrow] [data-vbody][data-open=false]{grid-template-rows:0fr}
.v [data-vhead][aria-expanded=true] [data-version-preview]{display:none}

[data-gallery] [data-designer-screen-slot]{cursor:grab}
[data-gallery][data-dragging],[data-gallery][data-dragging] [data-designer-screen-slot]{cursor:grabbing;user-select:none}
[data-gallery]:is([data-dragging],[data-wheeling]){scroll-snap-type:none;scroll-behavior:auto}
[data-gallery]:focus-visible:not([data-dragging],[data-wheeling]){outline:2px solid var(--app-accent,#c75216);outline-offset:-2px}
[data-screenshot-zoom]{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
[data-screenshot-zoom]::after{content:'+';position:absolute;top:8px;right:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#1d1d1f;font:600 20px/1 system-ui;box-shadow:0 2px 8px #0002;pointer-events:none}
[data-screenshot-zoom]:focus-visible{outline:none}
[data-screenshot-zoom]:focus-visible::after{outline:2px solid #424245;outline-offset:2px}
.v-t [data-screenshot-zoom]{display:none}
@media (orientation:landscape) and (pointer:coarse) and (max-height:639px){
    .v-t [data-gallery] [data-designer-screen-slot]{position:relative}
    .v-t [data-screenshot-zoom]{display:block;position:absolute;top:1px;right:1px;width:44px;height:44px}
    .v-t [data-screenshot-zoom]::after{top:7px;right:7px}
}
[data-screenshot-viewer]{box-sizing:border-box;width:min(100%,740px);height:100dvh;max-width:none;max-height:none;margin:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border:0;background:#171719;color:#fff;overflow:auto}
[data-screenshot-viewer][open]{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
[data-screenshot-viewer]::backdrop{background:#000b}
[data-screenshot-toolbar]{display:flex;align-items:center;gap:8px}
[data-screenshot-toolbar] button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:99px;background:none;color:#1d1d1f;font:inherit;cursor:pointer}
[data-screenshot-toolbar] button{touch-action:none}
[data-screenshot-toolbar] button span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:99px;background:rgb(255 255 255 / .78);font-size:20px;line-height:1}
[data-screenshot-toolbar] button:focus-visible{outline:2px solid #fffc;outline-offset:-1px}
[data-screenshot-toolbar] [aria-disabled=true]{opacity:.45;cursor:default}
[data-screenshot-count]{min-width:44px;color:#fffc;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
[data-screenshot-toolbar] [data-screenshot-close]{min-width:76px;margin-inline-start:auto}
[data-screenshot-toolbar] [data-screenshot-close] span{padding-inline:13px;font-size:14px}
[data-screenshot-viewer] figure{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0;margin:0;text-align:center;touch-action:pan-y pinch-zoom;user-select:none}
/* Size the image within its grid row, leaving the caption row clear in Safari. */
[data-screenshot-image]{position:relative;min-height:0}
[data-screenshot-image] img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
[data-screenshot-viewer] figcaption{font-size:14px;line-height:1.35}
html:has([data-screenshot-viewer][open]){overflow:hidden}

/* Official store artwork. The Play image has a transparent 41px margin. */
.v [data-store-badge]{--badge-height:52px;position:relative;display:block;width:max-content;height:var(--badge-height);padding:0;border-radius:0;background:none;flex:none}
.v [data-store-badge] img{display:block;width:auto;height:var(--badge-height)}
.v [data-store-badge=android]{width:calc(var(--badge-height) * 564 / 168);overflow:hidden}
.v [data-store-badge=android] img{position:absolute;top:50%;left:50%;height:calc(var(--badge-height) * 250 / 168);transform:translate(-50%,-50%)}
.v [data-store-badge]:focus-visible{outline:2px solid var(--app-accent,#c75216);outline-offset:4px}
@media(hover:hover){
  .v [data-store-badge]{border-radius:7px;transition:box-shadow .18s ease}
  .v [data-store-badge]:hover{box-shadow:0 5px 14px rgba(29,29,31,.24)}
}
@media(prefers-reduced-motion:reduce){.v [data-store-badge]{transition:none}}
.v-m .cc8:has([data-store-badge]){display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.v-m [data-store-badge]{--badge-height:clamp(40px,12vw,48px)}
[dir=rtl] [data-vhead]{text-align:start}

/* The same palette is bound from the designer's home catalog for each product. */
[data-app-palette] :is([data-hero],.c94,.cbc,[data-fslide]){background:var(--app-tint,#f5f5f7)}
[data-app-palette] :is([data-hero] h1,[data-hero] [data-hnav],.c99,.cbf,.cco){color:var(--app-ink,#1d1d1f)}
[data-app-palette] :is(.c8u,.c98,.ca3){color:var(--app-accent,#424245)}
[data-app-palette] :is([data-hero] [data-blob],.c96,.c9e,.ca6){background:radial-gradient(circle,var(--app-glow,#d8d8e0),transparent 65%);opacity:.55}
[data-app-palette] [data-hero] [data-blob="2"]{opacity:.4}
[data-app-palette] [data-hero] [data-hicon] img{box-shadow:0 18px 44px var(--app-shadow,rgba(29,29,31,.14))}
[data-app-palette] [data-phone]{box-shadow:0 40px 80px var(--app-shadow,rgba(29,29,31,.14))}
[data-app-palette] :is(.c95,.cbd,.ccm){color:color-mix(in srgb,var(--app-accent,#424245) 14%,transparent)}
[data-app-palette] [data-sup]{background:linear-gradient(150deg,var(--app-accent,#424245),var(--app-ink,#1d1d1f))}
[data-app-palette] [data-supicon]{box-shadow:0 10px 24px var(--app-shadow,rgba(29,29,31,.14))}

/* Let the navigation fill the same padded container as the page content. */
.v header.c9{max-width:none;box-sizing:border-box}
.v header.c9 > nav{gap:12px}
.v header.c9 > nav > a{padding-inline:16px}
.v header.c9 > nav > a[data-pill]{padding-inline:0}
.v header.c9 > nav > a[data-pill]::before{inset-inline:-5px}

/* Give the gallery breathing room before the following section, even when there is no version history. */
.v :is(#screenshots,#t-screenshots,#m-screenshots){margin-block-end:clamp(32px,5vw,72px)}

/* The desktop shell spans the viewport; regular content keeps its original 1280px limit. */
@supports (width:1cqw){
  @media (min-width:1100px){
    .v-d{max-width:none;container-type:inline-size}
    .v-d > main,.v-d > .c8{max-width:1280px;margin-inline:auto;box-sizing:border-box}
    .v-d > main{
      --page-gutter:max(0px,calc((100cqw - 1280px) / 2));
    }
    .v-d > main > :is(#studio,#screenshots){margin-inline:calc(-1 * var(--page-gutter))}
    .v-d > main > #studio,.v-d > main > #screenshots > .c9f{
      padding-inline:calc(var(--page-gutter) + 48px);
    }
    .v-d > footer{padding-inline:max(48px,calc((100% - 1184px) / 2))}
  }
}

/* Keep the contents of the collapsed report panel out of the tab order. */
.designer-form [data-report] [aria-checked="false"] + .ca2 > .c9y{visibility:hidden}

/* Product colors on the support page and its native form responses. */
[data-support-app] :is([data-hero], footer) { background: var(--app-tint); }
[data-support-app] :is([data-hero] [data-blob], footer [data-aurora]) {
  background: radial-gradient(circle, var(--app-glow), transparent 65%);
}
[data-support-app] :is([data-hero] h1, [data-hnav], [data-langbtn], .cfa a, .ceb) {
  color: var(--app-ink);
}
[data-support-app] :is(header [data-cta], footer .c3h, form [type="submit"]) {
  background: var(--app-btn);
}
[data-support-app] :is([data-langopt][aria-selected="true"], [data-langopt]:hover) {
  background: var(--app-soft) !important;
}
[data-support-app] :is([data-langbtn], [data-vhead], [data-switch]):focus-visible {
  outline: 2px solid var(--app-btn);
  outline-offset: 2px;
}
[data-support-app] form [data-inp]:focus-visible {
  border-color: var(--app-btn);
  box-shadow: 0 0 0 4px var(--app-ring);
}