.arrow-icon{width:18px;height:18px;transition:transform .2s;transform:rotate(180deg)}.template-card{border:1px solid var(--line);background:var(--surface);border-radius:20px;flex-direction:column;min-width:0;padding:14px;transition:transform .22s,box-shadow .22s;display:flex;box-shadow:0 10px 30px -22px #22252a59;container-type:inline-size}@media (hover:hover) and (pointer:fine){.template-card:hover{transform:translateY(-4px);box-shadow:0 26px 44px -26px #253a5673}}.template-stage{background:var(--paper);border-radius:14px;align-items:flex-end;gap:26px;padding:24px 24px 0;display:flex;overflow:hidden}.template-device{background:#1d2024;border-radius:32px 32px 0 0;flex:none;width:212px;padding:8px 8px 0;box-shadow:0 -2px 24px -10px #22252a73}.template-device-screen{background:#fff;border-radius:25px 25px 0 0;height:372px;overflow:hidden}.template-device-scale{transform-origin:100% 0;width:375px;transition:transform .9s;transform:scale(.522667)}.template-card:focus-within .template-device-scale{transition:transform 5s ease-in-out;transform:scale(.522667)translateY(-1350px)}@media (hover:hover) and (pointer:fine){.template-card:hover .template-device-scale{transition:transform 5s ease-in-out;transform:scale(.522667)translateY(-1350px)}}.template-anatomy{flex:1;align-self:center;min-width:0;padding-bottom:24px}.template-anatomy-title{color:var(--bronze-text);font-size:var(--fs-caption);margin:0 0 10px;font-weight:600}.template-anatomy ol{counter-reset:anatomy;margin:0;padding:0;list-style:none}.template-anatomy li{border-bottom:1px solid var(--line);color:var(--text);counter-increment:anatomy;align-items:center;gap:10px;padding-block:10px;font-size:14.5px;line-height:1.5;display:flex}.template-anatomy li:last-child{border-bottom:0}.template-anatomy li:before{width:24px;height:24px;color:var(--slate);background:var(--slate-tint);content:counter(anatomy);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:600;display:grid}.template-info{padding:20px 8px 4px}.template-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.template-info h3{color:var(--ink);letter-spacing:.08em;margin:0;font-size:22px;font-weight:700}.template-badge{color:var(--slate);background:var(--slate-tint);font-size:var(--fs-caption);white-space:nowrap;border-radius:999px;padding:6px 12px;font-weight:600}.template-description{color:var(--muted);margin:8px 0 0;font-size:15.5px;line-height:1.8}.template-category{color:var(--bronze-text);font-size:var(--fs-caption);margin:6px 0 0;font-weight:600}.template-links{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px;padding:16px 4px 4px;display:grid}.template-action{border:1px solid color-mix(in srgb, var(--slate) 30%, transparent);min-height:50px;color:var(--slate);text-align:center;border-radius:10px;justify-content:center;align-items:center;gap:10px;padding-inline:14px;font-size:15px;font-weight:600;text-decoration:none;transition:background .16s,border-color .16s;display:flex}.template-action:hover{border-color:var(--slate);background:var(--slate-tint)}.template-action.is-primary{border-color:var(--slate);color:#fff;background:var(--slate)}.template-action.is-primary:hover{background:var(--slate-strong)}.template-action .arrow-icon{width:16px;height:16px}@media (hover:hover) and (pointer:fine){.template-action.is-primary:hover .arrow-icon{transform:rotate(180deg)translate(3px)}}@container (max-width:500px){.template-stage{flex-direction:column-reverse;align-items:stretch;gap:18px;padding:20px 18px 0}.template-device{align-self:center}.template-device-screen{height:330px}.template-anatomy{padding-bottom:0}.template-anatomy ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;display:grid}.template-anatomy li:nth-last-child(2){border-bottom:0}}@container (max-width:380px){.template-anatomy ol{grid-template-columns:1fr}.template-anatomy li:nth-last-child(2){border-bottom:1px solid var(--line)}.template-links{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.template-card:hover .template-device-scale,.template-card:focus-within .template-device-scale{transform:scale(.522667)}}.template-card.is-premium{grid-column:1/-1}.template-card.is-premium .template-badge{color:var(--surface);background:var(--ink)}.template-note{color:var(--text);font-size:var(--fs-caption);margin:0 0 14px;padding-inline:14px;line-height:1.7}