.templates-filters{flex-wrap:wrap;gap:8px;margin-bottom:28px;display:flex}.templates-filters button{border:1px solid var(--ds-gray-200);background:var(--ds-gray-0);height:34px;color:var(--ds-gray-700);cursor:pointer;font:inherit;border-radius:999px;align-items:center;gap:7px;padding:0 13px;font-size:12px;display:inline-flex}.templates-filters button:hover{background:var(--ds-gray-75)}.templates-filters button[aria-pressed=true]{border-color:var(--ds-accent);background:var(--ds-accent);color:var(--ds-gray-0)}.templates-filters button:focus-visible{outline:2px solid var(--ds-gray-600);outline-offset:2px}.templates-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px;display:grid}.templates-card{min-width:0}.templates-card-preview{aspect-ratio:3/4;border:1px solid var(--ds-gray-200);border-radius:var(--ds-radius-md);background:var(--ds-gray-0);width:100%;color:inherit;cursor:pointer;transition:transform .2s var(--ds-ease), box-shadow .2s var(--ds-ease);flex-direction:column;padding:0;display:flex;overflow:hidden;box-shadow:0 12px 30px #1c1c1e0d}.templates-card-preview:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 16px 34px #1c1c1e17}.templates-card-preview:focus-visible{outline:2px solid var(--ds-gray-600);outline-offset:4px}.templates-card-preview:disabled{cursor:default}.templates-card-bar{border-bottom:1px solid var(--ds-gray-100);background:var(--ds-gray-25);flex:none;align-items:center;gap:5px;padding:7px 10px;display:flex}.templates-card-bar i{background:var(--ds-gray-200);border-radius:999px;width:6px;height:6px}.templates-card-bar span{background:var(--ds-gray-75);min-width:0;color:var(--ds-gray-600);font-family:var(--ds-font-mono);text-align:left;text-overflow:ellipsis;white-space:nowrap;border-radius:5px;flex:1;margin-left:6px;padding:2px 7px;font-size:9px;overflow:hidden}.templates-card-preview img{object-fit:cover;object-position:top;background:var(--ds-gray-50);flex:1;width:100%;min-height:0;display:block}.templates-card>small{color:var(--ds-lime-fg);letter-spacing:.08em;text-transform:uppercase;margin-top:14px;font-size:10px;font-weight:600;display:block}.templates-card h2{letter-spacing:-.01em;margin:4px 0 5px;font-size:14px}.templates-card p{color:var(--ds-gray-500);margin:0;font-size:12px;line-height:1.5}.templates-preview-modal.ds-modal{grid-template-rows:minmax(0,1fr) auto;width:min(1240px,100%);height:calc(100vh - 40px);display:grid}.templates-preview-modal .ds-modal-body{min-height:0;padding:14px;display:flex}.templates-preview-modal .completion-error{color:var(--ds-red-fg);align-self:center;margin:0;font-size:12px}.templates-preview-frame{border:1px solid var(--ds-gray-200);border-radius:var(--ds-radius-md);background:var(--ds-gray-0);flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.templates-preview-frame .templates-card-bar span{text-align:center;flex:0 260px;margin-inline:auto}.templates-preview-stage{background:var(--ds-gray-50);flex:1;min-height:0;position:relative;overflow:hidden}.templates-preview-stage>img{object-fit:cover;object-position:top;filter:blur(2px);opacity:.7;width:100%;height:100%;display:block}.templates-preview-stage>iframe{opacity:0;width:100%;height:100%;transition:opacity .2s var(--ds-ease);background:#fff;border:0;position:absolute;inset:0}.templates-preview-stage>iframe.is-ready{opacity:1}.templates-preview-loading{background:var(--ds-gray-0);width:46px;height:46px;color:var(--ds-gray-700);box-shadow:var(--ds-shadow-lg);border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.templates-preview-loading svg{animation:.8s linear infinite templates-preview-spin}@keyframes templates-preview-spin{to{transform:rotate(360deg)}}@media (width<=1180px){.templates-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=840px){.templates-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=520px){.templates-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.templates-card-preview,.templates-preview-stage>iframe{transition:none}.templates-preview-loading svg{animation-duration:2.4s}}
