/* Sliding student testimonials (videos + quotes) and the Patreon page preview. 2026-11-07 */
.tm{position:relative;margin-top:36px}
.tm-viewport{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.tm-viewport::-webkit-scrollbar{display:none}
.tm-track{display:flex;align-items:stretch;width:max-content;margin:0;padding:6px 0 10px;list-style:none}
.tm-item{flex:0 0 auto;margin-right:18px;display:flex}
.tm-item .video{width:260px;display:flex;flex-direction:column;cursor:pointer}
.tm-item .video .media{aspect-ratio:1.4}
.tm-quote{width:330px;margin:0;padding:24px 24px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;border:1px solid var(--line,#d7e1e5);border-radius:17px;background:#f3f7f8;color:#06243d}
.tm-quote blockquote{margin:0;position:relative;padding-top:26px}
.tm-quote blockquote::before{content:"\201C";position:absolute;top:-14px;left:-2px;font:800 3.4rem/1 "Manrope",Arial,sans-serif;color:#006e75}
.tm-quote p{margin:0;font-size:.95rem;line-height:1.6}
.tm-quote figcaption b{display:block;font-size:.9rem}
.tm-quote figcaption small{display:block;margin-top:3px;color:#4a6272;font-size:.72rem}
/* moving state: only after the script duplicated the cards for a seamless loop */
.tm.is-moving .tm-viewport{overflow:hidden}
.tm.is-moving .tm-track{animation:tm-slide var(--tm-duration,70s) linear infinite}
.tm.is-moving:hover .tm-track,.tm.is-moving:focus-within .tm-track,.tm.is-paused .tm-track{animation-play-state:paused}
@keyframes tm-slide{to{transform:translateX(-50%)}}
.tm-toggle{position:absolute;right:0;top:-46px;min-height:36px;padding:0 14px;border:1px solid var(--line,#d7e1e5);border-radius:99px;background:#fff;color:#06243d;font:600 .78rem "DM Sans",Arial,sans-serif;cursor:pointer}
.tm-toggle:hover{border-color:#006e75}
.tm-toggle:focus-visible{outline:3px solid #006e75;outline-offset:3px}
.tm-transcripts{margin-top:26px;border-top:1px solid var(--line,#d7e1e5);padding-top:14px}
.tm-transcripts summary{cursor:pointer;font-weight:700;color:#006e75;min-height:44px;display:flex;align-items:center}
.tm-note{color:#4a6272;font-size:.8rem;margin:4px 0 18px}
.tm-transcript{max-width:820px;margin:0 0 26px}
.tm-transcript h3{font-size:1.05rem;margin:0 0 8px}
.tm-transcript h3 small{font-weight:500;color:#4a6272;font-size:.78rem;margin-left:6px}
.tm-transcript p{line-height:1.75;margin:0 0 8px}
.tm-transcript a{color:#006e75;font-size:.85rem;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.tm-item .video{width:200px}.tm-quote{width:270px;padding:20px}.tm-quote p{font-size:.9rem}.tm-toggle{position:static;margin-top:10px}.tm-item{margin-right:13px}}
@media(prefers-reduced-motion:reduce){.tm.is-moving .tm-track{animation:none}.tm.is-moving .tm-viewport{overflow-x:auto}}

/* Patreon: preview of the real Patreon page instead of the smoke + 3D marble */
.patreon-art.patreon-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:620px;padding:44px 28px;background:radial-gradient(ellipse at 50% 35%,#0e4f6e 0,#06243d 70%);perspective:none;text-decoration:none;color:#fff}
.patreon-art.patreon-preview::before,.patreon-art.patreon-preview::after{content:none}
.pp-window{display:block;width:min(360px,100%);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 28px 60px #00000059,0 0 0 1px #ffffff26;transform:rotate(-1.5deg);transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .5s}
.pp-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#eef2f4;color:#4a6272;font:600 11px/1 "DM Sans",Arial,sans-serif}
.pp-bar i{width:9px;height:9px;border-radius:50%;background:#c9d3d8}
.pp-bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-window img{display:block;width:100%;height:auto}
.pp-cta{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:99px;background:#ffe029;color:#06243d;font:700 .9rem "DM Sans",Arial,sans-serif}
.patreon-preview:hover .pp-window,.patreon-preview:focus-visible .pp-window{transform:rotate(0) translateY(-6px);box-shadow:0 36px 70px #00000066,0 0 0 1px #ffffff40}
.patreon-preview:focus-visible{outline:3px solid #ffe029;outline-offset:-6px}
@media(max-width:760px){.patreon-art.patreon-preview{min-height:0;height:auto;padding:30px 22px 26px}.pp-window{width:min(300px,86%)}}
@media(prefers-reduced-motion:reduce){.pp-window{transition:none}}

/* Self-hosted vertical (9:16) testimonial in the video modal. 2026-11-10 */
.modal.is-vertical{width:min(440px,calc((90vh - 110px) * 9 / 16 + 32px),calc(100% - 32px))}
.video-fallback[hidden]{display:none}
.modal.is-vertical .modalin{aspect-ratio:9/16}
.modal video{display:block;width:100%;height:100%;background:#071a2c;object-fit:contain}