/*
 * Tissel demos: what every demo site shares, and nothing of anyone's look.
 * Each demo's own file sets the tokens (--bg, --ink, --accent, the fonts and
 * the type steps) and draws its sections; this file is the reset, the motion
 * helpers, the dialog, the toast and the line that says it is a Tissel demo.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(> body.dx) { overflow-x: clip; }
body.dx {
	margin: 0;
	background: var(--bg, #fff);
	color: var(--ink, #111);
	font-family: var(--font-text, system-ui, sans-serif);
	font-size: var(--step-body, 1.0625rem);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
.dx :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
.dx :where(ul, ol) { padding: 0; list-style: none; }
.dx :where(img, video, canvas, svg) { display: block; max-width: 100%; }
.dx :where(img) { height: auto; }
.dx :where(a) { color: inherit; }
.dx :where(button, input, select, textarea) { font: inherit; color: inherit; }
.dx :where(button) { cursor: pointer; }
.dx ::selection { background: var(--accent, #111); color: var(--accent-ink, #fff); }
.dx :focus-visible { outline: 3px solid var(--focus, var(--accent, #111)); outline-offset: 3px; }
.dx .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dx [hidden] { display: none !important; }

/* the page's frame: one pair of margins everywhere */
.dx { --gutter: clamp(16px, 3.2vw, 48px); --ease: cubic-bezier(.2, .7, .1, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); }
.dx .dx-w { width: 100%; max-width: var(--max, 1440px); margin-inline: auto; padding-inline: var(--gutter); }

/* entrances: the parts of a block rise one after another, once; without the script nothing is hidden */
html.dx-js .dx .rv > *,
html.dx-js .dx .rv-one { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
html.dx-js .dx .rv.in > *,
html.dx-js .dx .rv-one.in { opacity: 1; transform: none; }

/* a picture that drifts slowly while it is on screen */
.dx .drift { transform: scale(calc(1.08 - var(--p, 0) * .08)) translate3d(0, calc((var(--p, 0) - .5) * -4%), 0); will-change: transform; }

/* the dialog every demo uses for its bookings and orders */
.dx .dx-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; background: var(--bg, #fff); color: var(--ink, #111); }
.dx .dx-dlg::backdrop { background: rgba(10, 10, 12, .55); }
.dx .dx-dlg[open] { animation: dx-in .35s var(--ease); }
@keyframes dx-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }

/* the lightbox */
.dx .dx-lb { width: auto; max-width: calc(100vw - 32px); background: transparent; overflow: visible; }
.dx .dx-lb img { max-width: calc(100vw - 32px); max-height: calc(100svh - 64px); object-fit: contain; }
.dx .dx-lb__x { position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #111; font-size: 26px; line-height: 1; }

/* the small message that answers a click */
.dx .dx-toast { position: fixed; z-index: 90; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 14px 20px; background: var(--ink, #111); color: var(--bg, #fff); font-size: 15px; font-weight: 600; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); animation: dx-in .3s var(--ease); }

/* Tissel's line at the end: the same on every demo, in Tissel's colours */
.dx .dx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 22px var(--gutter); background: #0b0b0f; color: #d9d9e0; font: 500 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.dx .dx-bar p { flex: 1 1 360px; }
.dx .dx-bar strong { color: #fff; }
.dx .dx-bar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; text-decoration: none; font-weight: 700; transition: transform .2s var(--ease), background .2s; }
.dx .dx-bar__go { background: #2f6bff; color: #fff; }
.dx .dx-bar__go:hover { transform: translateY(-2px); background: #1f5bf0; }
.dx .dx-bar__more { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.dx .dx-bar__more:hover { background: rgba(255, 255, 255, .08); }

/* the note under every form: nothing is sent from a demo */
.dx .dx-note { font-size: 14px; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	html.dx-js .dx .rv > *, html.dx-js .dx .rv-one { transform: none; transition: opacity .4s linear; }
	.dx .drift { transform: none; }
	.dx *, .dx *::before, .dx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}