/* The studio paper, for every page that is not a sample shop. */
img { height: auto; }
.bar { flex-wrap: wrap; }
.mark { align-items: center; display: inline-flex; gap: 0.5rem; }
.mark img { height: 1.5rem; width: 1.5rem; }
.bar nav { flex-wrap: wrap; gap: 0.2rem 1.1rem; }
.bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
.menu { display: none; margin-inline-start: auto; position: relative; }
.menu summary { border: 2px solid currentcolor; cursor: pointer; font-weight: 700; list-style: none; padding: 0.2rem 0.7rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { background: #fff; color: var(--char); display: grid; gap: 0.5rem; inset-inline-end: 0; min-width: 12rem; padding: 1rem; position: absolute; top: 2.4rem; z-index: 30; }
@media (max-width: 1100px) {
	.bar > nav { display: none; }
	.menu { display: block; }
	.cart { margin-inline-start: 0; }
}
.cart-n.bump, [data-cart].bump { animation: bump 0.4s; display: inline-block; }

.page { background: #fff; }
.crumbs { font-size: 0.85rem; padding: 1rem var(--gutter) 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; opacity: 0.5; }
.h-big { display: block; font-size: var(--big, clamp(5rem, 21vw, 20rem)); line-height: 0.82; }
.h-rest { display: block; font-size: clamp(1.4rem, 3.2vw, 3.2rem); line-height: 1; margin-block-start: 0.25em; }

/* The first screen of an effect: the demo is the page, the paper follows it. */
.fx { background: var(--paper); color: var(--ink); overflow: clip; position: relative; transition: --paper 280ms cubic-bezier(0.23, 1, 0.32, 1), --ink 280ms cubic-bezier(0.23, 1, 0.32, 1); }
.fx h1 { position: relative; z-index: 3; pointer-events: none; }
.fx .ticket { padding-block: 0; }
.fx .price { font-size: clamp(3rem, min(7vw, 12svh), 7rem); margin-block-end: 0.5rem; }
.ctl { background: none; border: 2px solid currentcolor; color: inherit; cursor: pointer; font: inherit; font-weight: 700; padding: 0.6rem 1rem; }
.ctl:disabled { cursor: default; opacity: 0.35; }
.ctl-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hint { font-size: 0.9rem; margin: 0; max-width: 24rem; }
.fx .sticker { position: absolute; z-index: 4; }

.fx-transition { display: grid; gap: 0 var(--gutter); grid-template: "title title" auto "ticket stage" 1fr / minmax(15rem, 1fr) minmax(0, 2.6fr); height: 100svh; min-height: 40rem; padding: 3.6rem var(--gutter) 1rem; }
.fx-transition h1 { grid-area: title; --big: min(17vw, 34svh); }
.fx-transition .fx-stage { grid-area: stage; margin-block-start: calc(min(17vw, 34svh) * -0.34); min-height: 0; z-index: 1; position: relative; }
.fx-stage .fill, .fill > .gs-track, .fill .gs-slide { height: 100%; }
.fx-transition .ticket { align-self: end; grid-area: ticket; }
.fx-transition .sticker { inset: 4.5rem var(--gutter) auto auto; }

.fx-speed { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100svh; min-height: 40rem; padding: 3.6rem 0 1rem; }
.fx-speed h1 { padding-inline: var(--gutter); --big: min(19vw, 30svh); }
.fx-speed .fx-stage { margin-block-start: 1rem; min-height: 0; position: relative; }
.fx-speed .row-demo { cursor: grab; height: 100%; margin-inline-start: var(--gutter); }
.fx-speed .row-demo .gs-track, .fx-speed .row-demo .gs-slide { height: 100%; }
.fx-speed .ticket { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.75rem var(--gutter) 0; }
.fx-speed .price { font-size: 2.2rem; margin: 0; }
.fx-speed .sticker { inset: 4.5rem var(--gutter) auto auto; }

.fx-pointer { display: grid; gap: 0 var(--gutter); grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); height: 100svh; min-height: 40rem; padding: 3.6rem var(--gutter) 1rem; }
.fx-pointer .fx-left { align-self: stretch; display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; min-width: 0; position: relative; z-index: 3; }
.fx-pointer h1 { --big: clamp(3.6rem, 9.2vw, 10rem); }
.fx-pointer .fx-stage { min-height: 0; position: relative; }
.fx-pointer .row-demo, .fx-pointer .row-demo .gs-track, .fx-pointer .row-demo .gs-slide { height: 100%; }
.fx-pointer .sticker { inset: 4.5rem calc(var(--gutter) + 1rem) auto auto; }

.fx-layout { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100svh; min-height: 42rem; padding: 3.6rem 0 1rem; }
.fx-layout .fx-stage { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding-block: 2rem; position: relative; }
.fx-layout .narrow { aspect-ratio: 1; cursor: grab; flex: 0 1 auto; height: 100%; max-width: 68vw; overflow: visible; }
.fx-layout .narrow .gs-track, .fx-layout .narrow .gs-slide { height: 100%; }
.fx-layout .wide { cursor: grab; height: 62%; width: 100%; }
.fx-layout .wide .gs-track, .fx-layout .wide .gs-slide { height: 100%; }
.fx-layout .fx-bottom { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem var(--gutter); justify-content: space-between; padding-inline: var(--gutter); position: relative; z-index: 3; }
.fx-layout h1 { --big: min(13vw, 22svh); }
.fx-layout .sticker { inset: 4.5rem var(--gutter) auto auto; }

.fx-many { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100svh; min-height: 40rem; padding: 3.6rem var(--gutter) 1rem; gap: 1rem; }
.fx-many h1 { --big: min(16vw, 24svh); }
.fx-many .fx-stage { min-height: 0; position: relative; }
.fx-many .gs { height: 100%; }
.fx-many .gs-track, .fx-many .gs-slide { height: 100%; }
.fx-many .ticket { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.fx-many .sticker { inset: 4.5rem var(--gutter) auto auto; }

.per { --gs-per-view: var(--per-s); --gs-gap: var(--gap, 10px); }
@media (min-width: 720px) { .per { --gs-per-view: var(--per-l); } }

/* What it does, large. */
.say { display: grid; gap: 1.5rem var(--gutter); grid-template-columns: minmax(0, 48rem) auto; justify-content: space-between; padding: clamp(3rem, 7vw, 6rem) var(--gutter); }
.say p { font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.3; margin: 0 0 1rem; }
.say p + p { font-size: 1.05rem; line-height: 1.5; max-width: 38rem; }
.say-side { align-self: start; display: grid; gap: 0.75rem; justify-items: start; max-width: 15rem; }
.say-side p { font-size: 0.95rem; margin: 0; }
.say-side .sticker { position: static; }

/* For and against: two sheets of paper side by side. */
.verdict { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.verdict > div { padding: clamp(2rem, 5vw, 4.5rem) var(--gutter); }
.verdict h2, .settings h2, .steps h2, .rel h2, .faq h2, .store-sec h2 { font-size: clamp(2.4rem, 5.5vw, 5rem); margin-block-end: 1.25rem; }
.v-yes { background: var(--paper, var(--mustard)); color: var(--ink, var(--char)); }
.v-no { background: var(--char); color: #fff; }
.verdict dl { margin: 0; }
.verdict dt { font-weight: 800; margin-block-start: 1.1rem; }
.verdict dd { margin: 0.15rem 0 0; max-width: 34rem; }

.settings { display: grid; gap: 2rem var(--gutter); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.set-stage { height: clamp(14rem, 30vw, 24rem); margin-block: 1rem 0.75rem; position: relative; }
.set-stage .gs, .set-stage .gs-track, .set-stage .gs-slide { height: 100%; }
.set-stage .set-narrow { aspect-ratio: 1; margin-inline: auto; overflow: visible; }
.knobs { display: grid; gap: 1.1rem; margin: 0; }
.knob { border-block-end: 2px solid var(--char); display: grid; gap: 0.1rem 1rem; grid-template-columns: minmax(0, 1fr) auto; padding-block-end: 0.8rem; }
.knob label { font-weight: 800; }
.knob output { font-variant-numeric: tabular-nums; font-weight: 700; }
.knob input { accent-color: var(--sticker); grid-column: 1 / -1; width: 100%; }
.knob small { color: inherit; font-size: 0.9rem; grid-column: 1 / -1; opacity: 0.85; }
.notes p { margin: 0 0 1rem; max-width: 34rem; }

.steps { background: #f4f4f2; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.steps ol { counter-reset: s; display: grid; gap: 1.5rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: block; font-family: Shoulders, Impact, sans-serif; font-size: 4.5rem; font-weight: 900; line-height: 1; }

.rel { padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.rel h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
.rel-group + .rel-group { margin-block-start: 2rem; }
.rel-group h3 { margin-block-end: 0.5rem; }
.taglinks { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.taglinks a { background: var(--char); clip-path: polygon(0.7rem 0, 100% 0, 100% 100%, 0.7rem 100%, 0 50%); color: #fff; display: inline-block; font-size: 0.95rem; font-weight: 600; padding: 0.35rem 0.8rem 0.35rem 1.25rem; text-decoration: none; }
@media (hover: hover) { .taglinks a:hover { background: var(--sticker); } }
.taglinks a:focus-visible { outline-offset: -4px; outline-color: #fff; }
.cta { align-items: center; background: var(--paper, var(--mustard)); color: var(--ink, var(--char)); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding: clamp(2rem, 4vw, 3rem) var(--gutter); }
.cta p { font-size: 1.2rem; font-weight: 600; margin: 0; max-width: 36rem; }

/* Index pages. */
.ix { padding: 5rem var(--gutter) clamp(2rem, 5vw, 4rem); }
.ix h1 { font-size: clamp(4rem, 13vw, 13rem); }
.ix p { font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.3; margin: 1.25rem 0 0; max-width: 46rem; }
.fam { padding: clamp(2rem, 4vw, 3rem) 0; }
.fam-head { display: grid; gap: 0.5rem var(--gutter); grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); margin-block-end: 1.25rem; padding-inline: var(--gutter); }
.fam-head h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); }
.fam-head p { margin: 0; }
.wall { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(46vw, 15rem), 1fr)); }
.tile { color: #fff; display: block; overflow: hidden; position: relative; text-decoration: none; }
.tile .gs { aspect-ratio: 1; }
.tile .gs-track, .tile .gs-slide { height: 100%; }
.tile b { background: linear-gradient(transparent, #0009); bottom: 0; font-family: Shoulders, Impact, sans-serif; font-size: 1.9rem; font-weight: 900; left: 0; line-height: 1; padding: 2.5rem 0.6rem 0.5rem; pointer-events: none; position: absolute; right: 0; z-index: 2; }
.tile:focus-visible { outline: 4px solid var(--sticker); outline-offset: -4px; }
.tile .sticker { font-size: 1.05rem; height: 3rem; position: absolute; right: 0.4rem; top: 0.4rem; width: 3rem; z-index: 2; }
.effect-count { font-size: 0.95rem; margin: 0; }

/* Prose. */
.article { padding: 5rem var(--gutter) 3rem; }
.article > * { margin-inline: auto; max-width: 42rem; }
.article h1 { font-size: clamp(3rem, 7vw, 6.5rem); margin-block-end: 1.5rem; max-width: 60rem; }
.article .intro-p { font-size: 1.35rem; line-height: 1.35; }
.article h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 0.95; margin-block: 2.5rem 0.75rem; }
.article pre { background: var(--char); color: #fff; font-size: 0.85rem; line-height: 1.45; overflow-x: auto; padding: 1rem; }
.article code { font-size: 0.9em; }
.article .art-pic { aspect-ratio: 1; display: block; margin-block: 2rem; max-width: 60rem; object-fit: cover; width: 100%; }
.faq { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter); }
.faq h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
.faq details { border-block-end: 2px solid currentcolor; max-width: 46rem; padding-block: 0.7rem; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 0.5rem 0 0.3rem; }

/* The blocks' pages. */
.block-hero { background: var(--paper); color: var(--ink); padding: 5rem var(--gutter) clamp(2rem, 5vw, 4rem); }
.block-hero h1 { font-size: clamp(2.8rem, 6vw, 6.2rem); max-width: 24ch; }
.block-hero.tight { padding-block: 4rem 1.25rem; }
.block-hero.tight h1 { font-size: clamp(2.4rem, 4.4vw, 4.6rem); max-width: 28ch; }
.block-hero.tight p { font-size: 1.05rem; margin-block-start: 0.5rem; }
.block-hero p { font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.35; margin: 1rem 0 0; max-width: 44rem; }
.bhv { display: grid; gap: 1.1rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin: 0; }
.bhv dt { font-weight: 800; }
.bhv dd { margin: 0.1rem 0 0; }
.demo-wrap { background: #f4f4f2; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter); }
.demo-wrap > h2 { font-size: clamp(2rem, 4vw, 3rem); margin-block-end: 1rem; }
.mc-row { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 20rem)); }
.scrub-box { align-items: center; display: flex; font-weight: 600; gap: 0.5rem; margin-block-start: 0.5rem; }

/* The two panels people ask about. */
.backend { background: #eef0f2; color: #1e1e1e; display: grid; gap: 2rem var(--gutter); grid-template-columns: minmax(0, 1fr) minmax(0, 22rem) minmax(0, 28rem); padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); }
.backend h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); margin-block-end: 1rem; }
.backend p { margin: 0 0 1rem; max-width: 34rem; }
.panel { background: #fff; border: 1px solid #c8cdd2; font-size: 0.9rem; }
.panel h3 { border-block-end: 1px solid #dfe3e6; font-size: 0.9rem; margin: 0; padding: 0.65rem 0.9rem; }
.panel dl { margin: 0; padding: 0.7rem 0.9rem; }
.panel dl div { display: flex; gap: 1rem; justify-content: space-between; padding-block: 0.3rem; }
.panel dd { margin: 0; text-align: end; }
.panel dt { font-weight: 500; }
.panel small { color: #50575e; display: block; padding: 0 0.9rem 0.8rem; }

/* The playground. */
.mp .mp-stage .hint { color: inherit; }
.mp { background: var(--paper, #eef0f2); color: var(--ink, #1b1712); display: grid; gap: 1.5rem var(--gutter); grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter); }
.mp-stage { align-self: start; display: grid; gap: 0.75rem; justify-items: start; min-width: 0; }
.mp-card { background: #fff; color: #1e1e1e; max-width: 26rem; padding: 0.75rem; width: 100%; }
.mp-card .gs { aspect-ratio: 1; }
.mp-gallery { background: #fff; color: #1e1e1e; display: grid; gap: 0.75rem 1.25rem; grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 1fr); max-width: 56rem; padding: 0.75rem; width: 100%; }
.mp-gallery .gs { aspect-ratio: 1; }
.mp .gs-track, .mp .gs-slide { height: 100%; }
.mp-title { font-size: 1.05rem; font-weight: 700; margin: 0.6rem 0 0.1rem; }
.mp-price { font-size: 1.05rem; margin: 0 0 0.6rem; }
.mp-thumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mp-thumbs button { background: none; border: 2px solid transparent; cursor: pointer; padding: 0; width: 3.4rem; }
.mp-thumbs button[aria-current="true"] { border-color: #1e1e1e; }
.mp-thumbs img { aspect-ratio: 1; height: auto; object-fit: cover; width: 100%; }
.mp .inspector { background: #fff; border: 1px solid #c8cdd2; color: #1e1e1e; font-size: 0.9rem; }
.inspector fieldset { border: 0; border-block-end: 1px solid #dfe3e6; margin: 0; padding: 0.75rem 0.9rem; }
.inspector legend { float: left; font-weight: 700; margin-block-end: 0.5rem; padding: 0; width: 100%; }
.inspector label { clear: both; display: flex; justify-content: space-between; margin-block: 0.45rem 0.1rem; }
.inspector select, .inspector input[type="text"] { border: 1px solid #8c8f94; font: inherit; min-height: 2.2rem; padding: 0.2rem 0.4rem; width: 100%; }
.inspector input[type="range"] { accent-color: #1e1e1e; width: 100%; }
.inspector input[type="color"] { border: 1px solid #8c8f94; height: 2.2rem; padding: 0.1rem; width: 100%; }
.inspector [data-about] { font-size: 0.85rem; margin: 0.4rem 0 0; min-height: 0; }
.inspector-note { color: #50575e; font-size: 0.82rem; margin: 0; padding: 0.7rem 0.9rem; }

/* Home additions. */
.store-band { background: #fff; border-block-end: 2px solid var(--char); display: grid; gap: 1.25rem var(--gutter); grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); padding: clamp(2rem, 4vw, 3.5rem) var(--gutter); }
.store-band h2 { font-size: clamp(2.6rem, 6vw, 5.5rem); margin-block-end: 0.75rem; }
.store-band p { margin: 0 0 1rem; max-width: 30rem; }
.store-mini { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(45%, 9rem), 1fr)); }
.store-mini a { color: inherit; font-size: 0.9rem; text-decoration: none; }
.store-mini img { aspect-ratio: 1; margin-block-end: 0.35rem; object-fit: cover; width: 100%; }
.store-mini b { display: block; font-weight: 600; }
.big-link { background: var(--char); color: #fff; display: inline-block; font-weight: 800; padding: 0.7rem 1.1rem; text-decoration: none; }
@media (hover: hover) { .big-link:hover { background: var(--sticker); } }
.foot-nav { display: grid; gap: 1.5rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); width: 100%; }
.foot-nav h2 { font-family: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.3; margin: 0 0 0.35rem; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { font-size: 0.92rem; }
.foot-nav a { display: inline-block; padding-block: 0.1rem; text-decoration: none; }
@media (hover: hover) { .foot-nav a:hover { text-decoration: underline; } }
.shops-index { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.shop-tile { color: var(--ink); display: grid; background: var(--paper); text-decoration: none; }
.shop-tile img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.shop-tile span { padding: 0.75rem 1rem 1rem; }
.shop-tile b { display: block; font-size: 2rem; font-weight: 400; line-height: 1.1; }
.shop-tile small { font-size: 0.95rem; }

/* Patterns. */
.pat-list { display: grid; gap: 2rem var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); padding: 0 var(--gutter) 3rem; }
.pat-card { color: inherit; display: block; text-decoration: none; }
.pat-card img { aspect-ratio: 1; margin-block-end: 0.5rem; object-fit: cover; width: 100%; }
.pat-card b { font-family: Shoulders, Impact, sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; }
.pat-card p { margin: 0.25rem 0 0; }
.pat-tier { font-size: 0.85rem; font-weight: 800; }
.pat-live { padding: clamp(1.5rem, 4vw, 3rem) var(--gutter); background: var(--paper, #eee); color: var(--ink, #111); }
.pat-spec { display: grid; gap: 2rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.pat-spec h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-block-end: 0.75rem; }
.pat-spec ul { margin: 0; padding-inline-start: 1.1rem; }

@media (max-width: 780px) {
	.fx-transition { grid-template: "title" auto "stage" 56vh "ticket" auto / minmax(0, 1fr); height: auto; }
	.fx-transition h1 { --big: 22vw; }
	.fx-transition .fx-stage { margin-block-start: -4vw; }
	.fx-transition .ticket { padding-block-start: 1rem; }
	.fx-pointer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(44vh, 1fr); height: auto; min-height: 100svh; }
	.fx-pointer .fx-stage { height: 50vh; }
	.fx-pointer h1 { --big: 19vw; }
	.fx-layout h1 { --big: 19vw; }
	.fx-speed h1, .fx-many h1 { --big: 20vw; }
	.fx-speed, .fx-layout, .fx-many { height: auto; min-height: 100svh; }
	.fx-speed .fx-stage { height: 52vh; }
	.fx-layout .fx-stage { height: 56vh; }
	.fx-many .fx-stage { height: 60vh; }
	.say, .settings, .fam-head, .store-band, .backend, .mp, .mp-gallery { grid-template-columns: minmax(0, 1fr); }
	.fx .sticker { height: 3.2rem; width: 3.2rem; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.fx { transition: none; }
}
.fx .ticket { grid-area: auto; }
.fx-transition .ticket { grid-area: ticket; }
.knobs { align-content: start; align-self: start; }
.knob { grid-auto-rows: min-content; }
.mp-card .gs { aspect-ratio: 1; }
@media (max-width: 560px) {
	.bar { flex-wrap: nowrap; gap: 0.75rem; }
	.cart { order: 2; }
	.cart-w { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; width: 1px; }
	.menu { order: 3; margin-inline-start: 0; }
	.mark { margin-inline-end: auto; }
}
.pat-live { overflow: clip; }
.set-stage { overflow: clip; }
.article code { overflow-wrap: anywhere; }
.article pre code { overflow-wrap: normal; }

/* H1 lines never touch, at any width. */
.h-big { line-height: 0.98; padding-block-end: 0.04em; }
.h-rest { line-height: 1.05; margin-block-start: 0.3em; }
.h-long .h-big { font-size: calc(var(--big) * 0.68); }
.fx-hint { padding-inline: var(--gutter); }

/* Effect pages: square pictures, name, price and button per product. */
.fx-transition { grid-template-columns: minmax(15rem, 1fr) auto; height: auto; min-height: 100svh; }
.fx-transition .fx-stage { height: min(100svh - 11rem, 62vw); margin-block-start: 0; width: min(100svh - 11rem, 62vw); }
.fx-transition h1 { --big: min(13vw, 24svh); }
.fx-speed, .fx-pointer, .fx-layout, .fx-many { height: auto; min-height: 100svh; }
.fx-speed .fx-stage, .fx-pointer .fx-stage, .fx-many .fx-stage { min-height: 0; }
.fx-speed h1 { --big: min(14vw, 22svh); }
.fx-speed .row-demo, .fx-speed .row-demo .gs-track, .fx-speed .row-demo .gs-slide, .fx-pointer .row-demo, .fx-pointer .row-demo .gs-track, .fx-pointer .row-demo .gs-slide, .fx-many .gs, .fx-many .gs-track, .fx-many .gs-slide, .fx-layout .wide, .fx-layout .wide .gs-track, .fx-layout .wide .gs-slide { height: auto; }
.fx-pointer { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2.4fr); }
.fx-pointer .fx-left { justify-content: flex-start; }
.fx-pointer h1 { --big: clamp(3.4rem, 7.4vw, 8rem); }
.fx .gs-slide .gs-media, .settings .gs-slide .gs-media { aspect-ratio: 1; height: auto; }
.fx-stage .fill .gs-slide .gs-media, .set-stage .gs-stack .gs-media { height: 100%; }
.fx-layout .fx-stage { min-height: 28rem; }
.fx-layout .narrow { aspect-ratio: 1; height: min(100svh - 20rem, 60vw); max-width: none; }
.fx-layout .narrow .gs-slide .gs-media { height: 100%; }
.fx-layout h1 { --big: min(11vw, 18svh); }
.fx-many h1 { --big: min(13vw, 20svh); }
.fx-is-slab .gs-slide .gs-media { border-radius: 28px; }
.fx .pd { color: inherit; }
.fx .pd .buy { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.set-stage { height: auto; overflow: clip; }
.set-stage .gs, .set-stage .gs-track, .set-stage .gs-slide { height: auto; }
.set-stage .gs-stack { aspect-ratio: 1; margin-inline: auto; max-width: 24rem; }
.set-stage .gs-stack .gs-track, .set-stage .gs-stack .gs-slide { height: 100%; }
.set-stage .set-narrow { aspect-ratio: 1; width: min(60vw, 20rem); }
.set-stage .set-narrow .gs-track, .set-stage .set-narrow .gs-slide { height: 100%; }
.set-now { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.settings .buy { background: var(--char); border-color: var(--char); color: #fff; }
.mp-card .gs, .mp-gallery .gs { aspect-ratio: 1; }
.mp-gallery { grid-template-columns: minmax(0, 1fr) minmax(12rem, 1fr); }
.tile-w .pd { padding-inline: 0.5rem; }
.tile-w { background: #f4f4f2; }
.pat-w { min-width: 0; }
.pat-w .buy, .store-mini .buy, .tile-w .buy, .art-pd .buy { background: var(--char); border-color: var(--char); color: #fff; }
.shop-tile span { background: var(--paper); color: var(--ink); display: block; }
.shop-tile { background: none; }
.art-pic { max-width: 34rem !important; }
.art-pd { max-width: 34rem; }
.sq-stage { aspect-ratio: 1; max-width: min(100%, 100svh - 8rem); position: relative; width: min(100%, 40rem); }
.sq-wrap { display: grid; gap: 1rem var(--gutter); grid-template-columns: minmax(0, auto) minmax(14rem, 1fr); }
.sq-wrap > h2 { grid-column: 1 / -1; }
.sq-side { align-self: end; }
.sq-side .buy { background: var(--ink, var(--char)); border-color: var(--ink, var(--char)); color: var(--paper, #fff); }
.demo-wrap .sq-side .buy, .pat-live .sq-side .buy { background: var(--char); border-color: var(--char); color: #fff; }
.demo-wrap .sq-stage { width: min(100%, 40rem); }

/* Home on squares. */
.hero { grid-template-columns: minmax(16rem, 1fr) auto; }
.hero-slider { align-self: start; height: min(100svh - 10rem, 60vw); margin-block-start: 0; width: min(100svh - 10rem, 60vw); }
.hero { --title: min(6.4vw, 22svh); height: auto; min-height: 100svh; }
.product img { aspect-ratio: 1; }
.flow { width: min(60vw, 26rem); }
.grid figcaption { display: flex; }
.row, .grid, .tick { --gs-gap: 10px; }
.band .product .buy { width: 100%; }

@media (max-width: 780px) {
	.fx-transition { grid-template: "title" auto "stage" auto "ticket" auto / minmax(0, 1fr); }
	.fx-transition .fx-stage { height: auto; aspect-ratio: 1; width: 100%; }
	.fx-transition .fx-stage .gs { aspect-ratio: 1; }
	.fx-pointer { grid-template-columns: minmax(0, 1fr); }
	.fx-pointer .fx-stage, .fx-speed .fx-stage, .fx-many .fx-stage { height: auto; }
	.fx-layout .fx-stage { height: auto; min-height: 0; }
	.fx-layout .narrow { height: auto; width: 68vw; }
	.fx-transition h1, .fx-speed h1, .fx-many h1, .fx-layout h1, .fx-pointer h1 { --big: 17vw; }
	.hero { grid-template: "title" auto "slider" auto "ticket" auto "tags" auto / minmax(0, 1fr); height: auto; }
	.hero-slider { aspect-ratio: 1; height: auto; width: 100%; }
	.sq-wrap { grid-template-columns: minmax(0, 1fr); }
	.sq-stage { width: 100%; }
	.mp-gallery { grid-template-columns: minmax(0, 1fr); }
	.art-pic { max-width: 100% !important; }
}
.gs .gs-slide:has(> .pd) > .gs-media, .gs .st-card .gs-media { aspect-ratio: 1; height: auto; width: 100%; }

/* Transition pages: title and details on the left, the square beside them, all in the first screen. */
@media (min-width: 781px) {
	.fx-transition { align-items: start; grid-template: "title stage" auto "ticket stage" 1fr / minmax(15rem, 1fr) auto; }
	.fx-transition h1 { --big: clamp(3.2rem, 7vw, 8rem); grid-area: title; }
	.fx-transition .fx-stage { grid-area: stage; height: min(100svh - 6rem, 58vw); width: min(100svh - 6rem, 58vw); }
	.fx-transition .ticket { align-self: end; grid-area: ticket; }
}
.fx-layout h1 { --big: clamp(3rem, 7vw, 8rem); }
.hero, .fx, .w-hero, .s-hero, .f-hero, .j-hero, .k-hero, .p-hero, .c-hero, .r-hero, .a-hero, .h-wall, .b-hero, .g-hero { overflow: clip; }

.fx-speed h1 { --big: clamp(3rem, 7.5vw, 8rem); }
.flow-caption .buy { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fx-layout .wide .gs-media { height: auto; aspect-ratio: 1; }
.store-band .mg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .store-band .mg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The header stays, so the cart is always in sight. */
html { scroll-padding-top: 4.5rem; }
.bar, .strip { backdrop-filter: blur(10px); background: color-mix(in srgb, #fff 92%, transparent); box-shadow: 0 1px 0 #0002; color: #1b1712; position: sticky; top: 0; z-index: 60; }
.bar nav a, .bar .mark, .strip nav a, .strip .mark, .bar .cart, .strip .cart { color: #1b1712; }
.bar .cart, .strip .cart { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.bar .cart [data-cart], .strip .cart [data-cart] { background: #1b1712; border-radius: 1em; color: #fff; display: inline-block; min-width: 1.5em; padding: 0 0.4em; text-align: center; }
.strip { flex-wrap: wrap; }
.strip + main .cartline, main .shopname + .cartline, .cartline { display: none; }
@media (max-width: 560px) { .cart-word { display: none; } .bar .cart::before, .strip .cart::before { content: "Cart "; } }
.fx-layout .narrow { height: min(100svh - 24rem, 60vw); }
.fx-layout .fx-stage { min-height: 20rem; }
.fx-layout .wide { --per-l: 4.4 !important; }
.fx-layout h1 { --big: clamp(2.6rem, 5.5vw, 6rem); }
@media (max-width: 780px) { .fx-layout .narrow { height: auto; } }

.fx-speed { grid-template-columns: minmax(0, 1fr); }
.fx-speed h1, .fx-hint { min-width: 0; }
.h-rest { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 780px) { .fx .sticker { inset: 4.75rem var(--gutter) auto auto; } .fx-speed .h-big, .fx-many .h-big { padding-inline-end: 3.5rem; } }
@media (max-width: 780px) { .fx-speed h1, .fx-many h1 { padding-inline-end: calc(var(--gutter) + 4.25rem); } }
.hero-head { grid-area: title; min-width: 0; }
.hero-head h1 { margin-block-end: 0.15em; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.5rem); font-weight: 600; margin: 0; }
.bar { flex-wrap: nowrap; gap: 1rem; }
.bar .mark { white-space: nowrap; }
.bar > nav { flex-wrap: nowrap; font-size: 0.92rem; gap: 0 0.85rem; white-space: nowrap; }
.bar .cart-w { font-size: 0.85rem; }
@media (max-width: 1320px) { .bar .cart-w { display: none; } .bar .cart::before { content: "Cart "; } }
@media (max-width: 1080px) { .bar > nav { display: none; } .bar .menu { display: block; } }
@media (min-width: 781px) {
	.hero { align-items: start; grid-template: "title slider" auto "ticket slider" 1fr "tags slider" auto / minmax(16rem, 1fr) auto; --title: clamp(3rem, 5.4vw, 6rem); }
	.hero h1 { line-height: 1.02; white-space: normal; }
	.hero-slider { grid-area: slider; height: min(100svh - 5.5rem, 58vw); width: min(100svh - 5.5rem, 58vw); }
}
@media (max-width: 1080px) { .bar .mark { min-width: 0; white-space: normal; } .bar { gap: 0.5rem; } }
.plans h2.again { font-size: clamp(2rem, 11vw, 5rem); overflow-wrap: break-word; }