/* Three real template previews, with focus driven by the visitor. */
.nt-preview-showcase{min-width:0;padding:10px 0 10px clamp(24px,4vw,68px);color:#f5efe3}
.nt-preview-heading{margin:0 0 34px;font:700 clamp(34px,3.8vw,62px)/1.02 var(--al-display);letter-spacing:-.025em;text-wrap:balance}
.nt-preview-heading em{display:block;color:var(--al-violet);font:italic 600 .9em/1.12 var(--al-editorial);letter-spacing:-.055em}
.nt-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,24px);align-items:start}
.nt-preview-card{position:relative;min-width:0;margin:0;transform-origin:50% 70%;transition:transform 220ms ease,opacity 220ms ease;z-index:0}
.nt-preview-canvas{position:relative;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:#302137}
.nt-preview-canvas :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.nt-preview-canvas [hidden]{display:none}
.nt-preview-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;width:100%;padding:0 5px 15px;border:0;border-radius:4px;background:linear-gradient(transparent 72%,#170f2366);color:#f5efe3;cursor:pointer;font:500 12px/1.4 'DM Sans',system-ui,sans-serif;box-shadow:none;transition:none}
.nt-preview-play>span{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 11px;border-radius:999px;background:#201528e8}
.nt-preview-play svg{width:12px;height:12px;fill:currentColor;stroke:none}
.nt-preview-play .nt-preview-pause{display:none}
.nt-preview-card[data-playing=true] .nt-preview-start{display:none}
.nt-preview-card[data-playing=true] .nt-preview-pause{display:block}
.nt-preview-play:focus-visible{outline:3px solid var(--al-lime);outline-offset:-4px}
.nt-preview-card figcaption{margin-top:14px;color:#e5d6eb;font:500 14px/1.5 'DM Sans',system-ui,sans-serif;text-align:center;transition:color 220ms ease}
.nt-preview-showcase[data-focused]:not([data-focused=""]) .nt-preview-card{opacity:.62}
.nt-preview-showcase[data-focused]:not([data-focused=""]) .nt-preview-card[data-active=true]{opacity:1;transform:translateY(-9px) scale(1.045);z-index:2}
.nt-preview-card[data-active=true] figcaption{color:var(--al-lime)}
.nt-preview-card[data-active=true] .nt-preview-canvas{box-shadow:0 0 25px #c79bdf36}
.nt-preview-feedback{position:absolute;inset:auto 0 43px;margin:0;padding:8px;color:#fff;background:#302137;font:400 12px/1.5 'DM Sans',system-ui,sans-serif;z-index:3}
.nt-preview-feedback:empty{display:none}
.nt-preview-follow{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px}
.nt-preview-selection{margin:0;color:#e5d6eb;font:400 13px/1.6 'DM Sans',system-ui,sans-serif}
.nt-preview-download{display:inline-flex;align-items:center;justify-content:center;gap:14px;flex-shrink:0;min-height:46px;padding:11px 22px;border-radius:999px;background:var(--al-lime);color:var(--al-plum);font:600 14px/1.4 'DM Sans',system-ui,sans-serif;text-decoration:none;box-shadow:none}
.nt-preview-download:hover{background:#c8ee60;color:var(--al-plum)}
.nt-preview-download:focus-visible{outline:3px solid var(--al-paper);outline-offset:5px}
.nt-preview-context{margin:16px 0 0;color:#c4afce;font:400 10px/1.7 'DM Sans',system-ui,sans-serif}
@media(max-width:1100px){.nt-preview-showcase{padding-left:28px}.nt-preview-follow{gap:12px}.nt-preview-selection{font-size:12px}.nt-preview-download{padding-inline:17px}}
@media(max-width:900px){.nt-preview-showcase{padding:14px 0 16px;max-width:620px;width:100%;justify-self:center}.nt-preview-heading{font-size:clamp(38px,7vw,56px);margin-bottom:30px}.nt-preview-follow{margin-top:24px}.nt-preview-context{font-size:11px}}
@media(max-width:480px){.nt-preview-grid{gap:11px}.nt-preview-heading{font-size:38px}.nt-preview-card figcaption{font-size:12px;margin-top:10px}.nt-preview-play{font-size:10px;padding-bottom:9px}.nt-preview-play>span{padding:4px 8px;gap:5px;min-height:29px}.nt-preview-follow{flex-wrap:wrap;gap:14px}.nt-preview-download{min-height:48px}.nt-preview-selection{font-size:12px}.nt-preview-showcase[data-focused]:not([data-focused=""]) .nt-preview-card[data-active=true]{transform:translateY(-6px) scale(1.04)}}
@media(prefers-reduced-motion:reduce){.nt-preview-card,.nt-preview-card figcaption{transition:none}.nt-preview-showcase[data-focused]:not([data-focused=""]) .nt-preview-card[data-active=true]{transform:none}}