.template-preview{--preview-accent:#80745d;color:#28241f;background:#f3efe7;grid-template-columns:minmax(0,1fr) minmax(320px,430px);min-height:calc(100svh - 82px);display:grid}.template-preview__stage{background:radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--preview-accent) 11%, transparent), transparent 30%), linear-gradient(115deg, #f7f4ee, #e9e2d7);align-content:start;justify-items:center;min-width:0;padding:20px clamp(24px,5vw,76px) 28px;display:grid}.template-preview__browse{justify-content:space-between;align-items:center;gap:16px;width:min(100%,760px);min-height:52px;font-size:.84rem;display:flex}.template-preview__browse a{min-height:44px;color:inherit;border-radius:999px;align-items:center;gap:7px;padding:0 12px;text-decoration:none;display:inline-flex}.template-preview__browse a:focus-visible,.template-preview__details a:focus-visible,.template-preview__details button:focus-visible{outline:3px solid color-mix(in srgb, var(--preview-accent) 62%, #fff);outline-offset:3px}.template-preview__card{width:min(100%, 640px, calc(max(240px, 100svh - 220px) * var(--preview-card-ratio,.8)));--tmpl-accent:var(--preview-accent);filter:drop-shadow(0 30px 35px #2d251b2e)}.template-preview__card .hv-card-frame{padding:8px}.template-preview__card--paused *,.template-preview__card--paused :before,.template-preview__card--paused :after{animation-play-state:paused!important}.template-preview__details{background:#fffdf9;border-left:1px solid #ded8ce;flex-direction:column;align-items:flex-start;padding:clamp(44px,7vw,96px) clamp(28px,4vw,58px);display:flex}.template-preview__heading>p{color:#756d62;letter-spacing:.12em;text-transform:capitalize;margin:0 0 12px;font-size:.76rem}.template-preview__heading h1{max-width:12ch;font-family:var(--font-serif,Georgia, serif);letter-spacing:-.035em;margin:0;font-size:clamp(2.25rem,4vw,4.2rem);font-weight:500;line-height:.98}.template-preview__animated{border:1px solid color-mix(in srgb, var(--preview-accent) 45%, #d8d0c4);min-height:28px;color:color-mix(in srgb, var(--preview-accent) 76%, #2c271f);border-radius:999px;align-items:center;margin-top:18px;padding:0 11px;font-size:.76rem;display:inline-flex}.template-preview__summary{color:#665f55;max-width:35ch;margin:30px 0;font-size:1rem;line-height:1.65}.template-preview__colourways>span{color:#5e574e;margin-bottom:12px;font-size:.8rem;display:block}.template-preview__colourways>div{gap:10px;display:flex}.template-preview__colourways a{--colourway:#777;background:var(--colourway);border:8px solid #fffdf9;border-radius:50%;width:44px;height:44px;display:block;box-shadow:0 0 0 1px #cec6b8}.template-preview__colourways a[aria-current=true]{box-shadow:0 0 0 2px #2f2a24}.template-preview__motion{flex-wrap:wrap;gap:8px;margin-top:24px;display:flex}.template-preview__motion button{min-height:44px;color:inherit;cursor:pointer;background:0 0;border:1px solid #d2cabd;border-radius:999px;padding:0 15px}.template-preview__actions{width:100%;margin-top:auto;padding-top:40px}.template-preview__use{color:#fff;background:#28241f;border-radius:999px;justify-content:space-between;align-items:center;width:100%;min-height:56px;padding:0 22px;font-weight:650;text-decoration:none;display:flex}.template-preview__actions p{color:#7b746b;text-align:center;margin:12px 0 0;font-size:.76rem}@media (max-width:820px){.template-preview{min-height:auto;padding-bottom:94px;display:block}.template-preview__stage{padding:8px 18px 24px}.template-preview__browse{padding:0 2px}.template-preview__browse a{padding-inline:8px}.template-preview__card{width:min(100%, 520px, calc(max(220px, 100svh - 210px) * var(--preview-card-ratio,.8)))}.template-preview__details{border:0;border-top:1px solid #ded8ce;padding:34px 22px 26px}.template-preview__heading h1{font-size:clamp(2.2rem,11vw,3.4rem)}.template-preview__summary{margin:22px 0}.template-preview__actions{z-index:40;padding:10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffdf9f0;border-top:1px solid #ddd5c9;position:fixed;bottom:0;left:0;right:0}.template-preview__actions p{display:none}}@media (prefers-reduced-motion:reduce){.template-preview__card *,.template-preview__card :before,.template-preview__card :after{transition:none!important;animation:none!important}}