Input
{
"patchText": "*** Begin Patch\n*** Delete File: /var/www/n50library.gulasch.site/n50-library.css\n*** Add File: /var/www/n50library.gulasch.site/n50-library.css\n+@property --library-p {\n+ syntax: \"<number>\";\n+ inherits: true;\n+ initial-value: 0;\n+}\n+\n+:root {\n+ --library-p: var(--p, 0);\n+ --paper: #f6edd3;\n+ --page-line: #cdbb93;\n+}\n+\n+body {\n+ background:\n+ radial-gradient(circle at 50% 8svh, rgba(255, 223, 158, 0.13), transparent 24svh),\n+ linear-gradient(180deg, #020203 0%, #050404 44%, #0b0705 100%);\n+}\n+\n+#wordmark {\n+ font-size: clamp(72px, 10vw, 126px);\n+ letter-spacing: 0.28em;\n+}\n+\n+#library-dock {\n+ display: none;\n+}\n+\n+.tent-position:nth-of-type(1) { --cover: #812336; --page-delay: 0s; }\n+.tent-position:nth-of-type(2) { --cover: #1d5d76; --page-delay: -0.18s; }\n+.tent-position:nth-of-type(3) { --cover: #376b2f; --page-delay: -0.36s; }\n+.tent-position:nth-of-type(4) { --cover: #8a612e; --page-delay: -0.54s; }\n+.tent-position:nth-of-type(5) { --cover: #5b3a86; --page-delay: -0.72s; }\n+\n+.tent {\n+ --closed-shadow: clamp(0, calc((var(--library-p) - 0.35) * 1.8), 1);\n+ filter: drop-shadow(0 calc(12px * var(--closed-shadow)) calc(14px * var(--closed-shadow)) rgba(0, 0, 0, 0.65));\n+}\n+\n+.face,\n+.cap polygon {\n+ transition: none;\n+}\n+\n+.face {\n+ overflow: hidden;\n+ background:\n+ linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 16%, rgba(0, 0, 0, 0.12)),\n+ repeating-linear-gradient(90deg, var(--paper) 0 18px, var(--page-line) 19px 21px, var(--paper) 22px 38px);\n+}\n+\n+.face::before,\n+.face::after {\n+ content: \"\";\n+ position: absolute;\n+ inset: 0;\n+ pointer-events: none;\n+}\n+\n+.face::before {\n+ opacity: clamp(0, calc(var(--library-p) * 1.18 - 0.12), 1);\n+ background:\n+ linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 22%, rgba(0, 0, 0, 0.45)),\n+ var(--cover);\n+}\n+\n+.face::after {\n+ inset: 9% 4%;\n+ opacity: clamp(0.1, calc(1 - var(--library-p) * 0.6), 0.75);\n+ background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(20, 12, 8, 0.24) 29px 31px);\n+ animation: page-scan 1.45s steps(7, end) infinite;\n+ animation-delay: var(--page-delay);\n+}\n+\n+.face--page-edge::before,\n+.face--fore-edge::before {\n+ opacity: clamp(0, calc(var(--library-p) * 1.45 - 0.2), 1);\n+ background:\n+ linear-gradient(90deg, rgba(255, 255, 255, 0.58), transparent 25%, rgba(0, 0, 0, 0.18)),\n+ repeating-linear-gradient(0deg, var(--paper) 0 10px, var(--page-line) 11px 13px);\n+}\n+\n+.face--spine::before {\n+ opacity: clamp(0, calc(var(--library-p) * 1.4 - 0.2), 1);\n+ background:\n+ linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 36%, rgba(0, 0, 0, 0.52)),\n+ repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 236, 181, 0.18) 35px 39px),\n+ var(--cover);\n+}\n+\n+.face--spine::after {\n+ opacity: clamp(0, calc(var(--library-p) * 1.5 - 0.45), 0.8);\n+ inset: 12% 31%;\n+ border: 1px solid rgba(255, 238, 190, 0.45);\n+ background: rgba(0, 0, 0, 0.1);\n+}\n+\n+.face--foot {\n+ background: #000;\n+}\n+\n+.face--foot::before {\n+ opacity: clamp(0, calc(var(--library-p) * 1.15), 1);\n+ background:\n+ linear-gradient(90deg, rgba(255,255,255,0.15), transparent 24%, rgba(0,0,0,0.48)),\n+ var(--cover);\n+}\n+\n+.caps {\n+ opacity: calc(1 - var(--library-p));\n+}\n+\n+.cap polygon {\n+ fill: color-mix(in srgb, var(--paper) 76%, var(--cover));\n+}\n+\n+.book-page {\n+ position: absolute;\n+ left: 0;\n+ top: 0;\n+ transform-origin: left center;\n+ transform-style: preserve-3d;\n+ opacity: clamp(0, calc(var(--library-p) * 1.7 - 0.16), 0.88);\n+ pointer-events: none;\n+}\n+\n+.book-page__sheet {\n+ width: 100%;\n+ height: 100%;\n+ border: calc(var(--edge) * 0.7px * var(--k)) solid rgba(0, 0, 0, 0.42);\n+ border-left-width: calc(var(--edge) * 1.4px * var(--k));\n+ background:\n+ linear-gradient(90deg, rgba(255,255,255,0.82), rgba(241, 229, 197, 0.95) 70%, rgba(198, 178, 133, 0.92)),\n+ repeating-linear-gradient(0deg, transparent 0 21px, rgba(54, 36, 21, 0.18) 22px 24px);\n+ box-shadow: inset 12px 0 16px rgba(109, 77, 38, 0.18);\n+ animation: page-flutter 1.15s cubic-bezier(.45, 0, .2, 1) infinite;\n+ animation-delay: calc(var(--page-delay) + var(--sheet-delay));\n+ transform-origin: left center;\n+}\n+\n+.book-page:nth-last-child(1) { --sheet-delay: -0.08s; }\n+.book-page:nth-last-child(2) { --sheet-delay: -0.21s; }\n+.book-page:nth-last-child(3) { --sheet-delay: -0.34s; }\n+.book-page:nth-last-child(4) { --sheet-delay: -0.47s; }\n+.book-page:nth-last-child(5) { --sheet-delay: -0.60s; }\n+.book-page:nth-last-child(6) { --sheet-delay: -0.73s; }\n+\n+#header-backdrop::after {\n+ content: \"\";\n+ position: absolute;\n+ left: 50%;\n+ top: clamp(126px, 18svh, 166px);\n+ width: min(850px, calc(100vw - 24px));\n+ height: 18px;\n+ opacity: clamp(0, calc(var(--library-p) * 2.5 - 1.15), 1);\n+ transform: translateX(-50%) perspective(600px) rotateX(64deg);\n+ border: 2px solid #000;\n+ background:\n+ linear-gradient(90deg, rgba(255,255,255,0.24), transparent 18%, rgba(0,0,0,0.5)),\n+ repeating-linear-gradient(90deg, #4b260f 0 26px, #2b1307 27px 35px);\n+ box-shadow: 0 22px 28px rgba(0,0,0,0.72);\n+}\n+\n+@keyframes page-scan {\n+ from { transform: translateX(-7%); }\n+ to { transform: translateX(10%); }\n+}\n+\n+@keyframes page-flutter {\n+ 0%, 100% { transform: rotateY(0deg); }\n+ 48% { transform: rotateY(calc(-18deg * var(--library-p))); }\n+ 72% { transform: rotateY(calc(5deg * var(--library-p))); }\n+}\n+\n+@media (prefers-reduced-motion: reduce) {\n+ .face::after,\n+ .book-page__sheet {\n+ animation: none;\n+ }\n+}\n+\n+@media (max-width: 560px) {\n+ #wordmark {\n+ letter-spacing: 0.12em;\n+ }\n+}\n*** Add File: /var/www/n50library.gulasch.site/n50-library.js\n+(() => {\n+ const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n+ const lerp = (from, to, progress) => from + (to - from) * progress;\n+ const smooth = (value) => value * value * (3 - 2 * value);\n+\n+ const parseLength = (value) => Number.parseFloat(value || \"0\") || 0;\n+ const parseTransform = (transform) => {\n+ const translate = transform.match(/translate3d\\(([-0-9.]+)px,([-0-9.]+)px,([-0-9.]+)px\\)/);\n+ const rotateX = transform.match(/rotateX\\(([-0-9.]+)deg\\)/);\n+ const rotateY = transform.match(/rotateY\\(([-0-9.]+)deg\\)/);\n+ const rotateZ = transform.match(/rotate(?:Z)?\\(([-0-9.]+)deg\\)/);\n+\n+ return {\n+ x: translate ? Number.parseFloat(translate[1]) : 0,\n+ y: translate ? Number.parseFloat(translate[2]) : 0,\n+ z: translate ? Number.parseFloat(translate[3]) : 0,\n+ rx: rotateX ? Number.parseFloat(rotateX[1]) : 0,\n+ ry: rotateY ? Number.parseFloat(rotateY[1]) : 0,\n+ rz: rotateZ ? Number.parseFloat(rotateZ[1]) : 0,\n+ };\n+ };\n+\n+ const serializeTransform = ({ x, y, z, rx, ry, rz }) =>\n+ `translate3d(${x.toFixed(2)}px,${y.toFixed(2)}px,${z.toFixed(2)}px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) rotateZ(${rz.toFixed(2)}deg)`;\n+\n+ const mixPose = (from, to, progress) => ({\n+ x: lerp(from.x, to.x, progress),\n+ y: lerp(from.y, to.y, progress),\n+ z: lerp(from.z, to.z, progress),\n+ rx: lerp(from.rx, to.rx, progress),\n+ ry: lerp(from.ry, to.ry, progress),\n+ rz: lerp(from.rz, to.rz, progress),\n+ });\n+\n+ const makePage = () => {\n+ const page = document.createElement(\"div\");\n+ const sheet = document.createElement(\"div\");\n+ page.className = \"book-page\";\n+ sheet.className = \"book-page__sheet\";\n+ page.append(sheet);\n+ return page;\n+ };\n+\n+ const buildBook = (tent) => {\n+ const faces = Array.from(tent.querySelectorAll(\":scope > .face\"));\n+ if (faces.length < 6) {\n+ return undefined;\n+ }\n+\n+ faces[0].classList.add(\"face--cover\");\n+ faces[1].classList.add(\"face--page-edge\");\n+ faces[2].classList.add(\"face--cover\");\n+ faces[3].classList.add(\"face--page-edge\");\n+ faces[4].classList.add(\"face--spine\");\n+ faces[5].classList.add(\"face--fore-edge\");\n+\n+ const width = parseLength(faces[0].style.width);\n+ const height = Math.max(430, Math.min(560, width * 0.72));\n+ const depth = Math.max(96, Math.min(150, width * 0.18));\n+ const halfWidth = width / 2;\n+ const halfHeight = height / 2;\n+ const halfDepth = depth / 2;\n+\n+ const targets = [\n+ { width, height, pose: { x: -halfWidth, y: -halfHeight, z: halfDepth, rx: 0, ry: 0, rz: 0 } },\n+ { width, height: depth, pose: { x: -halfWidth, y: -halfHeight, z: -halfDepth, rx: 90, ry: 0, rz: 0 } },\n+ { width, height, pose: { x: -halfWidth, y: -halfHeight, z: -halfDepth, rx: 0, ry: 0, rz: 0 } },\n+ { width, height: depth, pose: { x: -halfWidth, y: halfHeight, z: -halfDepth, rx: 90, ry: 0, rz: 0 } },\n+ { width: depth, height, pose: { x: -halfWidth, y: -halfHeight, z: -halfDepth, rx: 0, ry: -90, rz: 0 } },\n+ { width: depth, height, pose: { x: halfWidth, y: -halfHeight, z: -halfDepth, rx: 0, ry: -90, rz: 0 } },\n+ ];\n+\n+ const faceState = faces.map((face, index) => ({\n+ element: face,\n+ width: parseLength(face.style.width),\n+ height: parseLength(face.style.height),\n+ pose: parseTransform(face.style.transform),\n+ target: targets[index],\n+ }));\n+\n+ const pages = Array.from({ length: 6 }, makePage);\n+ pages.forEach((page) => tent.append(page));\n+\n+ return { width, height, depth, pages, faces: faceState };\n+ };\n+\n+ const books = Array.from(document.querySelectorAll(\".tent\")).map(buildBook).filter(Boolean);\n+ if (books.length === 0) {\n+ return;\n+ }\n+\n+ const update = () => {\n+ const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 1;\n+ const progress = smooth(clamp(window.scrollY / (viewportHeight * 0.72), 0, 1));\n+ document.documentElement.style.setProperty(\"--library-p\", progress.toFixed(5));\n+ document.body.style.setProperty(\"--library-p\", progress.toFixed(5));\n+\n+ for (const book of books) {\n+ const halfWidth = book.width / 2;\n+ const halfHeight = book.height / 2;\n+ const halfDepth = book.depth / 2;\n+\n+ for (const face of book.faces) {\n+ face.element.style.width = `${lerp(face.width, face.target.width, progress).toFixed(2)}px`;\n+ face.element.style.height = `${lerp(face.height, face.target.height, progress).toFixed(2)}px`;\n+ face.element.style.transform = serializeTransform(mixPose(face.pose, face.target.pose, progress));\n+ }\n+\n+ book.pages.forEach((page, index) => {\n+ const fan = -68 + index * 8;\n+ const flutter = Math.sin(Date.now() / 180 + index * 0.9) * 3 * progress;\n+ const angle = lerp(fan, -2 + index * 0.28 + flutter, progress);\n+ const z = halfDepth + 5 + index * 1.35;\n+ const x = -halfWidth + 7 + index * 0.45;\n+ const y = -halfHeight + 7 + index * 0.35;\n+ const pageWidth = book.width - 18 - index * 1.6;\n+ const pageHeight = book.height - 14 - index * 1.1;\n+\n+ page.style.width = `${pageWidth.toFixed(2)}px`;\n+ page.style.height = `${pageHeight.toFixed(2)}px`;\n+ page.style.transform = `translate3d(${x.toFixed(2)}px,${y.toFixed(2)}px,${z.toFixed(2)}px) rotateY(${angle.toFixed(2)}deg)`;\n+ });\n+ }\n+\n+ requestAnimationFrame(update);\n+ };\n+\n+ update();\n+})();\n*** Update File: /var/www/n50library.gulasch.site/index.html\n@@\n- </script><link rel=\"stylesheet\" href=\"/_astro/index.BoMHpLjc.css\"><link rel=\"stylesheet\" href=\"/n50-library.css\"></head> <body> <header id=\"camera\"> <div class=\"tent-position tent-position--center\" style=\"--row-y:0px;--angle:0deg\"><div class=\"tent\"><div class=\"face\" style=\"width:754.92px;height:291.38px;transform:translate3d(-377.47px,-206.04px,-71.78px) rotateX(45.07deg)\"></div><div class=\"face face--foot\" style=\"width:754.92px;height:56.86px;transform:translate3d(-377.47px,206.40px,-72.62px) rotateX(-10.46deg)\"></div><div class=\"face\" style=\"width:754.92px;height:292.57px;transform:translate3d(-377.47px,-0.24px,134.50px) rotateX(-45.07deg)\"></div><div class=\"face\" style=\"width:754.92px;height:369.96px;transform:translate3d(-377.47px,-262.08px,-84.26px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:754.92px;height:57.41px;transform:translate3d(-377.47px,-262.08px,-84.26px) rotateX(12.55deg)\"></div><div class=\"face\" style=\"width:754.92px;height:369.54px;transform:translate3d(-377.47px,-0.24px,177.10px) rotateX(-44.72deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.36px;height:524.40px;transform:translate3d(-177.10px,-262.08px,377.45px)\"><svg viewBox=\"0 0 261.36 524.40\"><polygon points=\"261.36,0.00 0.00,261.84 260.04,524.40 249.72,468.48 42.60,261.84 248.88,56.04\"></polygon></svg></div><div class=\"cap\" style=\"width:261.36px;height:524.40px;transform:translate3d(-177.10px,-262.08px,-377.47px)\"><svg viewBox=\"0 0 261.36 524.40\"><polygon points=\"261.36,0.00 0.00,261.84 260.04,524.40 249.72,468.48 42.60,261.84 248.88,56.04\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:-700px;--angle:22.5deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:700px;--angle:-22.5deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:-1400px;--angle:45deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:1400px;--angle:-45deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div> <!-- wordmark is a real object in the 3D scene: it lies on the floor in\n+ </script><link rel=\"stylesheet\" href=\"/_astro/index.BoMHpLjc.css\"><link rel=\"stylesheet\" href=\"/n50-library.css\"><script src=\"/n50-library.js\" defer></script></head> <body> <header id=\"camera\"> <div class=\"tent-position tent-position--center\" style=\"--row-y:0px;--angle:0deg\"><div class=\"tent\"><div class=\"face\" style=\"width:754.92px;height:291.38px;transform:translate3d(-377.47px,-206.04px,-71.78px) rotateX(45.07deg)\"></div><div class=\"face face--foot\" style=\"width:754.92px;height:56.86px;transform:translate3d(-377.47px,206.40px,-72.62px) rotateX(-10.46deg)\"></div><div class=\"face\" style=\"width:754.92px;height:292.57px;transform:translate3d(-377.47px,-0.24px,134.50px) rotateX(-45.07deg)\"></div><div class=\"face\" style=\"width:754.92px;height:369.96px;transform:translate3d(-377.47px,-262.08px,-84.26px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:754.92px;height:57.41px;transform:translate3d(-377.47px,-262.08px,-84.26px) rotateX(12.55deg)\"></div><div class=\"face\" style=\"width:754.92px;height:369.54px;transform:translate3d(-377.47px,-0.24px,177.10px) rotateX(-44.72deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.36px;height:524.40px;transform:translate3d(-177.10px,-262.08px,377.45px)\"><svg viewBox=\"0 0 261.36 524.40\"><polygon points=\"261.36,0.00 0.00,261.84 260.04,524.40 249.72,468.48 42.60,261.84 248.88,56.04\"></polygon></svg></div><div class=\"cap\" style=\"width:261.36px;height:524.40px;transform:translate3d(-177.10px,-262.08px,-377.47px)\"><svg viewBox=\"0 0 261.36 524.40\"><polygon points=\"261.36,0.00 0.00,261.84 260.04,524.40 249.72,468.48 42.60,261.84 248.88,56.04\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:-700px;--angle:22.5deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:700px;--angle:-22.5deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:-1400px;--angle:45deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div><div class=\"tent-position\" style=\"--row-y:1400px;--angle:-45deg\"><div class=\"tent\"><div class=\"face\" style=\"width:503.28px;height:301.48px;transform:translate3d(-251.69px,-213.22px,-74.10px) rotateX(45.08deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.36px;transform:translate3d(-251.69px,213.62px,-75.06px) rotateX(-9.23deg)\"></div><div class=\"face\" style=\"width:503.28px;height:302.92px;transform:translate3d(-251.69px,-0.34px,139.38px) rotateX(-45.06deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.79px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(44.95deg)\"></div><div class=\"face face--foot\" style=\"width:503.28px;height:49.87px;transform:translate3d(-251.69px,-262.06px,-84.18px) rotateX(11.66deg)\"></div><div class=\"face\" style=\"width:503.28px;height:369.62px;transform:translate3d(-251.69px,-0.34px,177.06px) rotateX(-44.71deg)\"></div><div class=\"caps\" style=\"transform:rotateY(90deg)\"><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,251.59px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div><div class=\"cap\" style=\"width:261.24px;height:524.40px;transform:translate3d(-177.06px,-262.06px,-251.69px)\"><svg viewBox=\"0 0 261.24 524.40\"><polygon points=\"261.24,0.00 0.00,261.72 260.04,524.40 252.12,475.68 37.68,261.72 251.16,48.84\"></polygon></svg></div></div></div></div> <!-- wordmark is a real object in the 3D scene: it lies on the floor in\n*** End Patch"
}