.tile-showcase{background:var(--white);padding-block:40px 48px}.tile-showcase>.wrap{container-type:inline-size}.tile-showcase-heading{margin-bottom:30px}.tile-showcase-heading h2{font-size:var(--heading-section-size);line-height:var(--heading-section-leading)}.tile-showcase-heading p{color:var(--muted);align-items:flex-start;gap:10px;margin:10px 0 0;font-size:15px;display:flex}.tile-showcase-heading .tile-showcase-intro{max-width:75ch;color:var(--ink);margin-top:12px;font-size:17px;line-height:1.55;display:block}.tile-showcase-heading p>span{min-width:0}.tile-choice-arrow{width:72px;height:48px;color:var(--ink);pointer-events:none;flex:0 0 72px;align-self:flex-end;margin-bottom:-20px}.tile-browser{--tile-height:clamp(272px, 23.5vw, 320px);--tile-width:calc(var(--tile-height) * 694 / 978);--demo-width:var(--tile-width);--stack-step:44px;--selector-width:calc(var(--tile-width) * 2 + var(--stack-step) * 2 + 32px);grid-template-columns:var(--selector-width) var(--demo-width) minmax(0, 1fr);align-items:start;gap:24px 28px;display:grid;position:relative}.tile-selector{width:100%;height:var(--tile-height);isolation:isolate;grid-area:1/1;position:relative}.tile-choice{width:var(--tile-width);height:var(--tile-height);z-index:calc(4 - var(--stack-index));transform:translateX(calc(var(--stack-index) * var(--stack-step)));transition:transform .28s var(--ease-in-out), z-index 0s linear .28s;background:0 0;border:0;padding:0;position:absolute;top:0;left:0}.tile-choice[aria-pressed=true]{z-index:8;transform:translateX(calc(var(--selector-width) - var(--tile-width)));transition:transform .28s var(--ease-in-out), z-index 0s}.tile-art-hit{display:block;position:absolute;inset:0}.tile-art{perspective:900px;width:100%;height:100%;transition:transform .18s var(--ease-out);display:block}.tile-faces{width:100%;height:100%;transform-style:preserve-3d;transition:transform .28s var(--ease-in-out);display:block;position:relative}.tile-faces[data-side="1"]{transform:rotateY(180deg)}.tile-face{background:var(--white);backface-visibility:hidden;border-radius:5px;position:absolute;inset:0;overflow:hidden;box-shadow:0 2px 4px #0000001a,0 8px 16px #00000014}.tile-choice[aria-pressed=true] .tile-face{box-shadow:0 2px 5px #0000001a,0 12px 24px #0000001f}.tile-face-back{transform:rotateY(180deg)}.tile-face img{user-select:none;width:285.303%;max-width:none;height:113.804%;position:absolute;top:-5.21472%;left:-92.7954%}.tile-face-back img{height:113.92%;top:-5.22006%}.tile-choice:focus-visible{outline:none}.tile-choice:focus-visible .tile-art{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--corner-radius)}.tile-panels,.tile-panel{display:contents}.tile-panel[hidden]{display:none}.tile-information{min-width:0;min-height:var(--tile-height);flex-direction:column;grid-area:1/3;display:flex}.tile-information h3{font-size:var(--heading-item-size);margin:0;line-height:1.12}.tile-description{max-width:37ch;margin:12px 0 24px;font-size:17px;line-height:1.6}.tile-scale-options{margin-top:auto}.tile-scale-options legend{margin:0 0 8px;font-size:14px}.tile-scale-pair{grid-template-columns:1fr 1fr;gap:10px;max-width:330px;display:grid}.tile-scale-choice{border-radius:var(--corner-radius);background:0 0;border:0;min-width:0;padding:0}.tile-scale-choice:disabled{opacity:1}.tile-scale-sample{background-color:var(--paper);border-radius:var(--corner-radius);height:36px;display:block}.tile-scale-label{justify-content:space-between;align-items:center;gap:5px;padding:4px 0 0;font-size:14px;display:flex}.tile-scale-label svg{opacity:0;width:17px;height:17px}.tile-scale-choice[aria-pressed=true] .tile-scale-label svg{opacity:1}.tile-flip-hint{color:var(--muted);align-items:center;gap:7px;margin:8px 0 0;font-size:14px;display:flex}.tile-flip-hint svg{flex:none;width:17px;height:17px}.tile-purchase{flex-wrap:wrap;grid-area:2/1;align-items:center;gap:14px 20px;display:flex}.tile-price-and-stock,.tile-purchase-actions{flex:none}.tile-price{margin:0 0 3px;font-size:21px;line-height:1.4}.tile-price>span:not(.product-price){color:var(--muted);font-size:13px}.tile-availability{color:var(--muted);margin:0;font-size:13px}.tile-purchase .button{width:100%}.tile-bundle-link{grid-area:2/3;place-self:center start;align-items:center;gap:8px;min-height:48px;font-size:14px;display:flex}.tile-bundle-copy{gap:4px;min-width:0;display:grid}.tile-bundle-link strong{white-space:nowrap;color:var(--ink);background:var(--yellow);text-underline-offset:4px;padding-inline:3px;font-weight:700;text-decoration:underline;display:inline-block}.tile-bundle-arrow{width:56px;height:52px;color:var(--ink);pointer-events:none;flex:none;align-self:flex-end;margin-bottom:-8px}.tile-bundle-copy .tile-savings-marker>span{text-underline-offset:4px;text-decoration:underline}.tile-savings-marker{white-space:nowrap;color:var(--ink);padding-inline:3px;font-weight:700;position:relative}.tile-savings-marker svg{width:100%;height:100%;fill:var(--yellow);opacity:.72;pointer-events:none;position:absolute;inset:0}.tile-savings-marker>span{position:relative}.tile-included-marker{font-weight:inherit;display:inline-block}.tile-savings-basis{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tile-demonstration{grid-area:1/2;min-width:0;margin:0}.tile-film{aspect-ratio:694/978;border-radius:var(--corner-radius);background:var(--paper);position:relative;overflow:hidden}.tile-film video{object-fit:cover;object-position:50% var(--film-y,50%);width:100%;height:100%;transform:scale(var(--film-zoom,1));transform-origin:50% var(--film-y,50%);display:block}[data-tile-panel=hexagonal]{--film-y:100%;--film-zoom:1.2}[data-tile-panel=dots]{--film-y:55%}[data-tile-panel=diagonal]{--film-y:40%}[data-tile-panel=crosshatch]{--film-y:50%}.tile-film-toggle{width:44px;min-height:44px;color:var(--ink);border-radius:var(--corner-radius);background:#fffffff2;border:0;justify-content:center;align-items:center;gap:7px;padding:10px;font-size:13px;line-height:1.2;display:flex;position:absolute;top:8px;right:8px}.tile-film-toggle span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tile-film.has-error .tile-film-toggle{width:auto}.tile-film.has-error .tile-film-toggle span{clip-path:none;white-space:normal;width:auto;height:auto;position:static;overflow:visible}.tile-film-toggle[hidden]{display:none}.tile-film-toggle svg{flex:none;width:16px;height:16px}.tile-pause-icon{display:none}.tile-film.is-playing .tile-pause-icon{display:block}.tile-film.is-playing .tile-play-icon{display:none}.tile-selection-status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tile-browser[data-instant] .tile-choice,.tile-browser[data-instant] .tile-art,.tile-browser[data-instant] .tile-faces,.tile-browser[data-resizing] .tile-choice,.tile-browser[data-resizing] .tile-art,.tile-browser[data-resizing] .tile-faces{transition:none}.tile-browser:not([data-ready]){display:block}.tile-browser:not([data-ready]) .tile-selector,.tile-browser:not([data-ready]) .tile-flip-hint{display:none}.tile-browser:not([data-ready]) .tile-panel{grid-template-columns:minmax(0, 1fr) var(--demo-width);gap:24px;display:grid}.tile-browser:not([data-ready]) .tile-information{grid-area:1/1;display:flex}.tile-browser:not([data-ready]) .tile-demonstration{grid-area:1/2;align-self:start}.tile-browser:not([data-ready]) .tile-purchase{grid-area:2/1/auto/-1}.tile-browser:not([data-ready]) .tile-bundle-link{margin-top:24px}.tile-browser:not([data-ready]) .tile-panel+.tile-panel{margin-top:48px}.tile-browser:not([data-ready]) .tile-film video{object-fit:contain;transform:none}@media (hover:hover) and (pointer:fine){.tile-choice:not([aria-pressed=true]):hover .tile-art{transform:translate(8px)}.tile-scale-choice:hover .tile-scale-label{text-underline-offset:3px;text-decoration:underline}.tile-bundle-link:hover strong{text-decoration-thickness:2px}}@media (width<=1180px){.tile-browser{--tile-width:min(213px, calc((100cqw - 144px) / 3));--tile-height:calc(var(--tile-width) * 978 / 694);grid-template-columns:var(--selector-width) var(--demo-width);width:min(100%, calc(var(--selector-width) + var(--demo-width) + 24px));column-gap:24px;margin-inline:auto}.tile-information{grid-area:2/1/auto/-1;grid-template-rows:min-content 1fr;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;min-height:0;display:grid}.tile-information h3{grid-area:1/1}.tile-description{grid-area:2/1;margin:12px 0 0}.tile-scale-options{grid-area:1/2/3;margin-top:0}.tile-purchase{grid-row:3}.tile-bundle-link{grid-area:3/2}}@media (width<=700px){.tile-showcase{padding-block:32px 38px}.tile-showcase-heading{margin-bottom:24px}.tile-showcase-heading h2{max-width:17ch}.tile-showcase-heading p{font-size:15px}.tile-browser{--tile-width:min(220px, calc((100vw - 60px) / 2));--stack-step:52px;--mobile-pull-y:calc(var(--tile-height) + 32px);grid-template-columns:var(--tile-width) var(--demo-width);gap:24px 20px;width:100%;max-width:460px}.tile-selector{height:calc(var(--mobile-pull-y) + var(--tile-height));grid-column:1/-1}.tile-choice[aria-pressed=true]{transform:translate(0, var(--mobile-pull-y))}.tile-demonstration{align-self:end}.tile-information{min-height:0;display:contents}.tile-information h3{grid-area:2/1/auto/-1}.tile-description{grid-area:4/1/auto/-1;max-width:none;margin:0}.tile-scale-options{grid-area:5/1/auto/-1;position:static}.tile-scale-options legend{margin-bottom:8px;font-size:14px;line-height:1.4}.tile-scale-pair{grid-template-columns:1fr 1fr;gap:10px;max-width:none}.tile-scale-label{padding-block:2px 0;font-size:14px}.tile-flip-hint{align-items:flex-start;margin-top:8px;font-size:14px;line-height:1.4}.tile-film-toggle{top:5px;right:5px}.tile-purchase{grid-column:1/-1;gap:14px 16px}.tile-purchase-actions{flex-grow:1}.tile-bundle-link{grid-area:6/1/auto/-1}.tile-browser:not([data-ready]) .tile-scale-options{margin-top:24px;position:static}.tile-browser:not([data-ready]) .tile-scale-pair{grid-template-columns:1fr 1fr}.tile-browser:not([data-ready]) .tile-information,.tile-browser:not([data-ready]) .tile-demonstration{grid-row:1}}@media (prefers-reduced-motion:reduce){.tile-choice,.tile-art,.tile-faces{transition:none}}@media (forced-colors:active){.tile-choice:focus-visible .tile-art{outline-color:highlight}.tile-scale-choice[aria-pressed=true]{outline:2px solid highlight}}